the first iteration of the preferences window that loads AND SAVES preferences (at least the paths in the downloads section)

deluge/ui/web/js/Deluge.OptionsManager.js

@@ -85,6 +85,14 @@ Deluge.OptionsManager = Ext.extend(Ext.util.Observable, {
 		field.on('blur', this.onFieldBlur, this);
 		field.on('change', this.onFieldChange, this);
 	},
+
+	/**
+	 * Changes all the changed values to be the default values
+	 */
+	commit: function() {
+		this.options = Ext.apply(this.options, this.changed);
+		this.reset();
+	},
 	
 	/**
 	 * Get the value for an option or options.

deluge/ui/web/js/Deluge.Preferences.Downloads.js

@@ -16,31 +16,38 @@
 			this.fields = {};
 			
 			var optMan = Deluge.Preferences.getOptionsManager();			
-			this.fieldsets['folders'] = this.add({
+			optMan.addOptions({
+				'download_location': ''
+			});
+			
+			var fieldset = this.add({
 				xtype: 'fieldset',
 				border: false,
 				title: _('Folders'),
 				labelWidth: 140,
 				defaultType: 'textfield',
+				defaults: {
+					enableKeyEvents: true
+				},
 				autoHeight: true
 			});
-			this.fields['download_location'] = this.fieldsets['folders'].add({
+			optMan.bind('download_location', fieldset.add({
 				name: 'download_location',
 				fieldLabel: _('Download to'),
 				width: 125
-			});
-			this.fields['move_completed'] = this.fieldsets['folders'].add({
-				name: 'move_completed',
+			}));
+			optMan.bind('move_completed_path', fieldset.add({
+				name: 'move_completed_path',
 				fieldLabel: _('Move completed to'),
 				width: 125
-			});
-			this.fields['copy_torrent_files'] = this.fieldsets['folders'].add({
-				name: 'copy_torrent_files',
+			}));
+			optMan.bind('torrentfiles_location', fieldset.add({
+				name: 'torrentfiles_location',
 				fieldLabel: _('Copy of .torrent files to'),
 				width: 125
-			});
+			}));
 			
-			this.fieldsets['allocation'] = this.add({
+			fieldset = this.add({
 				xtype: 'fieldset',
 				border: false,
 				title: _('Allocation'),
@@ -48,16 +55,16 @@
 				labelWidth: 1,
 				defaultType: 'radiogroup'
 			});
-			this.fields['compact_allocation'] = this.fieldsets['allocation'].add({
+			optMan.bind('compact_allocation', fieldset.add({
 				name: 'compact_allocation',
 				labelSeparator: '',
 				items: [
 					{boxLabel: _('Compact') + ' ', value: 'true'},
 					{boxLabel: _('Full'), value: 'false'}
 				]
-			});
+			}));
 			
-			this.fieldsets['options'] = this.add({
+			fieldset = this.add({
 				xtype: 'fieldset',
 				border: false,
 				title: _('Options'),
@@ -65,16 +72,16 @@
 				labelWidth: 1,
 				defaultType: 'checkbox'
 			});
-			this.fields['prioritize_first_last'] = this.fieldsets['options'].add({
-				name: 'prioritize_first_last',
+			optMan.bind('prioritize_first_last_pieces', fieldset.add({
+				name: 'prioritize_first_last_pieces',
 				labelSeparator: '',
 				boxLabel: _('Prioritize first and last pieces of torrent')
-			});
-			this.fields['add_paused'] = this.fieldsets['options'].add({
+			}));
+			optMan.bind('add_paused', fieldset.add({
 				name: 'add_paused',
 				labelSeparator: '',
 				boxLabel: _('Add torrents in Paused state')
-			});
+			}));
 		},
 		
 		onShow: function() {

deluge/ui/web/js/Deluge.Preferences.js

@@ -47,16 +47,6 @@ Copyright:
 				resizable: true,
 				title: _('Preferences'),
 				
-				buttons: [{
-					text: _('Close'),
-					handler: this.onCloseButtonClick,
-					scope: this
-				},{
-					text: _('Apply')
-				},{
-					text: _('Ok')
-				}],
-				
 				currentPage: false,
 				items: [{
 					xtype: 'grid',
@@ -94,13 +84,27 @@ Copyright:
 			Ext.deluge.PreferencesWindow.superclass.initComponent.call(this);
 			this.categoriesGrid = this.items.get(0);
 			this.configPanel = this.items.get(1);
+
+			this.addButton(_('Close'), this.onClose, this);
+			this.addButton(_('Apply'), this.onApply, this);
+			this.addButton(_('Ok'), this.onOk, this);
+			
 			this.optionsManager = new Deluge.OptionsManager();
 			
 			this.pages = {};
+			this.optionsManager = new Deluge.OptionsManager();
 			this.on('show', this.onShow, this);
 		},
 		
-		onCloseButtonClick: function() {
+		onApply: function(e) {
+			var changed = this.optionsManager.getDirty();
+			Deluge.Client.core.set_config(changed, {
+				success: this.onSetConfig,
+				scope: this
+			});
+		},
+		
+		onClose: function() {
 			this.hide();
 		},
 		
@@ -121,6 +125,10 @@ Copyright:
 			return this.optionsManager;
 		},
 		
+		onGotConfig: function(config) {
+			this.getOptionsManager().set(config);
+		},
+		
 		onPageSelect: function(selModel, rowIndex, r) {
 			if (this.currentPage) {
 				this.currentPage.hide();
@@ -132,10 +140,19 @@ Copyright:
 			this.configPanel.doLayout();
 		},
 		
+		onSetConfig: function() {
+			this.getOptionsManager().commit();
+		},
+		
 		onShow: function() {
 			if (!this.categoriesGrid.getSelectionModel().hasSelection()) {
 				this.categoriesGrid.getSelectionModel().selectFirstRow();
 			}
+			
+			Deluge.Client.core.get_config({
+				success: this.onGotConfig,
+				scope: this
+			})
 		}
 	});
 

deluge/ui/web/js/Deluge.UI.js

@@ -33,7 +33,6 @@ Copyright:
 */
 
 /**
- * @namespace Deluge
  * @static
  * @class Deluge.UI
  * The controller for the whole interface, that ties all the components