working version of the proxy preferences page with field hiding, config saving, the whole shebang

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

@@ -15,6 +15,7 @@ Ext.deluge.preferences.ProxyField = Ext.extend(Ext.form.FieldSet, {
 		this.type = this.add({
 			xtype: 'combo',
 			fieldLabel: _('Type'),
+			name: 'type',
 			mode: 'local',
 			width: 150,
 			store: new Ext.data.SimpleStore({
@@ -33,14 +34,16 @@ Ext.deluge.preferences.ProxyField = Ext.extend(Ext.form.FieldSet, {
 			valueField: 'id',
 			displayField: 'text'
 		})
-		this.host = this.add({
+		this.hostname = this.add({
 			xtype: 'textfield',
+			name: 'hostname',
 			fieldLabel: _('Host'),
-			disabled: true,
 			width: 220
 		});
+		
 		this.port = this.add({
 			xtype: 'uxspinner',
+			name: 'port',
 			fieldLabel: _('Port'),
 			width: 80,
 			strategy: {
@@ -48,41 +51,85 @@ Ext.deluge.preferences.ProxyField = Ext.extend(Ext.form.FieldSet, {
 				decimalPrecision: 0,
 				minValue: -1,
 				maxValue: 99999
-			},
+			}
-			disabled: true
 		});
+		
 		this.username = this.add({
 			xtype: 'textfield',
+			name: 'username',
 			fieldLabel: _('Username'),
-			disabled: true,
 			width: 220
 		});
+		
 		this.password = this.add({
 			xtype: 'textfield',
+			name: 'password',
 			fieldLabel: _('Password'),
 			inputType: 'password',
-			disabled: true,
 			width: 220
 		});
+		
+		this.type.on('change', this.onFieldChange, this);
 		this.type.on('select', this.onTypeSelect, this);
+		this.setting = false;
+	},
+	
+	getName: function() {
+		return this.initialConfig.name;
+	},
+	
+	getValue: function() {
+		return {
+			'type': this.type.getValue(),
+			'hostname': this.hostname.getValue(),
+			'port': this.port.getValue(),
+			'username': this.username.getValue(),
+			'password': this.password.getValue()
+		}
+	},
+
+	/**
+	 * Set the values of the proxies
+	 */
+	setValue: function(value) {
+		this.setting = true;
+		this.type.setValue(value['type']);
+		var index = this.type.getStore().find('id', value['type']);
+		var record = this.type.getStore().getAt(index);
+		
+		this.hostname.setValue(value['hostname']);
+		this.port.setValue(value['port']);
+		this.username.setValue(value['username']);
+		this.password.setValue(value['password']);
+		this.onTypeSelect(this.type, record, index);
+		this.setting = false;
+	},
+	
+	onFieldChange: function(field, newValue, oldValue) {
+		if (this.setting) return;
+		var newValues = this.getValue();
+		var oldValues = Ext.apply({}, newValues);
+		oldValues[field.getName()] = oldValue;
+		
+		this.fireEvent('change', this, newValues, oldValues);
 	},
 	
 	onTypeSelect: function(combo, record, index) {
 		var typeId = record.get('id');
 		if (typeId > 0) {
-			this.host.setDisabled(false);
+			this.hostname.show();
-			this.port.setDisabled(false);
+			this.port.show();
 		} else {
-			this.host.setDisabled(true);
+			this.hostname.hide();
-			this.port.setDisabled(true);
+			this.port.hide();
 		}
 		
 		if (typeId == 3 || typeId == 5) {
-			this.username.setDisabled(false);
+			this.username.show();
-			this.password.setDisabled(false);
+			this.password.show();
 		} else {
-			this.username.setDisabled(true);
+			this.username.hide();
-			this.password.setDisabled(true);
+			this.password.hide();
 		}
 	}
 });
@@ -100,21 +147,54 @@ Ext.deluge.preferences.Proxy = Ext.extend(Ext.form.FormPanel, {
 	
 	initComponent: function() {
 		Ext.deluge.preferences.Proxy.superclass.initComponent.call(this);
+		this.peer = this.add(new Ext.deluge.preferences.ProxyField({
+			title: _('Peer'),
+			name: 'peer'
+		}));
+		this.peer.on('change', this.onProxyChange, this);
 		
-		var optMan = Deluge.Preferences.getOptionsManager();
+		this.web_seed = this.add(new Ext.deluge.preferences.ProxyField({
+			title: _('Web Seed'),
+			name: 'web_seed'
+		}));
+		this.web_seed.on('change', this.onProxyChange, this);
 		
-		this.add(new Ext.deluge.preferences.ProxyField({
+		this.tracker = this.add(new Ext.deluge.preferences.ProxyField({
-			title: _('Peer')
+			title: _('Tracker'),
+			name: 'tracker'
 		}));
-		this.add(new Ext.deluge.preferences.ProxyField({
+		this.tracker.on('change', this.onProxyChange, this);
-			title: _('Web Seed')
+		
-		}));
+		this.dht = this.add(new Ext.deluge.preferences.ProxyField({
-		this.add(new Ext.deluge.preferences.ProxyField({
+			title: _('DHT'),
-			title: _('Tracker')
+			name: 'dht'
-		}));
-		this.add(new Ext.deluge.preferences.ProxyField({
-			title: _('DHT')
 		}));
+		this.dht.on('change', this.onProxyChange, this);
+		
+		Deluge.Preferences.getOptionsManager().bind('proxies', this);
+	},
+	
+	getValue: function() {
+		return {
+			'dht': this.dht.getValue(),
+			'peer': this.peer.getValue(),
+			'tracker': this.tracker.getValue(),
+			'web_seed': this.web_seed.getValue()
+		}
+	},
+	
+	setValue: function(value) {
+		for (var proxy in value) {
+			this[proxy].setValue(value[proxy]);
+		}
+	},
+	
+	onProxyChange: function(field, newValue, oldValue) {
+		var newValues = this.getValue();
+		var oldValues = Ext.apply({}, newValues);
+		oldValues[field.getName()] = oldValue;
+		
+		this.fireEvent('change', this, newValues, oldValues);
 	}
 });
 Deluge.Preferences.addPage(new Ext.deluge.preferences.Proxy());

deluge/ui/web/js/ext-extensions-debug.js

@@ -956,3 +956,41 @@ Ext.ux.form.SpinnerGroup = Ext.extend(Ext.form.CheckboxGroup, {
 	}
 });
 Ext.reg('uxspinnergroup', Ext.ux.form.SpinnerGroup);
+
+// Taken from http://extjs.com/forum/showthread.php?t=75273
+// remove spaces for hidden elements and make show(), hide(), enable() and disable() act on the label. don't use hideLabel with this
+Ext.override(Ext.layout.FormLayout, {
+	renderItem: function(c, position, target) {
+		if (c && !c.rendered && c.isFormField && c.inputType != 'hidden') {
+			var args = [
+				c.id, c.fieldLabel,
+				c.labelStyle||this.labelStyle||'',
+				this.elementStyle||'',
+				typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
+				(c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
+				c.clearCls || 'x-form-clear-left'
+			];
+			if(typeof position == 'number') {
+				position = target.dom.childNodes[position] || null;
+			}
+			if (position) {
+				c.formItem = this.fieldTpl.insertBefore(position, args, true);
+			}
+			else {
+				c.formItem = this.fieldTpl.append(target, args, true);
+			}
+			c.actionMode = 'formItem';
+			c.render('x-form-el-'+c.id);
+			c.container = c.formItem;
+			c.actionMode = 'container';
+		}
+		else {
+			Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
+		}
+	}
+});
+Ext.override(Ext.form.TriggerField, {
+	actionMode: 'wrap',
+	onShow: Ext.form.TriggerField.superclass.onShow,
+	onHide: Ext.form.TriggerField.superclass.onHide
+});