build up the layout for the options tab in initComponent, allowing for easy storage of the fields.

deluge/ui/web/js/Deluge.Details.Options.js

@@ -34,161 +34,236 @@ Copyright:
 
 Ext.deluge.details.OptionsTab = Ext.extend(Ext.form.FormPanel, {
 
-	title: _('Options'),
-	cls: 'x-deluge-options',
-	
 	constructor: function(config) {
-		this.initialConfig = {
-			autoScroll:true,
-			
-			deferredRender:false
-		}
 		config = Ext.apply({
-			items: [{
+			autoScroll: true,
-				layout: 'column',
-				border: false,
 			bodyStyle: 'padding: 5px;',
+			border: false,
+			cls: 'x-deluge-options',
 			defaults: {
-					border: false
+				autoHeight: true,
+				labelWidth: 1,
+				defaultType: 'checkbox'
+			},
+			deferredRender: false,
+			layout: 'column',
+			title: _('Options')
+		}, config);
+		Ext.deluge.details.OptionsTab.superclass.constructor.call(this, config);
 	},
 	
-				items: [{
+	initComponent: function() {
-					bodyStyle: 'padding-left: 5px; padding-right:5px;',
+		Ext.deluge.details.OptionsTab.superclass.initComponent.call(this);
-					width: 300,
+		
-					items: [{
+		this.fieldsets = {}, this.fields = {};
+		
+		/*
+		 * Bandwidth Options
+		 */
+		this.fieldsets.bandwidth = this.add({
 			xtype: 'fieldset',
-						title: _('Bandwidth'),
+			defaultType: 'uxspinner',
+			bodyStyle: 'padding: 5px',
+			
 			layout: 'table',
 			layoutConfig: {columns: 3},
-						autoHeight: true,
 			labelWidth: 150,
-						defaultType: 'uxspinner',
+			
-						items: [{
+			style: 'margin-left: 10px; margin-right: 5px; padding: 5px',
+			title: _('Bandwidth'),
+			width: 300
+		});
+		
+		/*
+		 * Max Download Speed
+		 */
+		this.fieldsets.bandwidth.add({
 			xtype: 'label',
 			text: _('Max Download Speed'),
 			forId: 'max_download_speed',
 			cls: 'x-deluge-options-label'
-						}, {
+		});
+		this.fields.max_download_speed = this.fieldsets.bandwidth.add({
 			id: 'max_download_speed',
 			name: 'max_download_speed',
 			width: 100,
 			value: -1,
-							strategy: new Ext.ux.form.Spinner.NumberStrategy({
+			stragegy: new Ext.ux.form.Spinner.NumberStrategy({
 				minValue: -1,
 				maxValue: 99999,
 				incrementValue: 1
 			})
-						}, {
+		});
+		this.fieldsets.bandwidth.add({
 			xtype: 'label',
-							text: 'KiB/s',
+			text: _('KiB/s'),
-							style: 'margin-left: 10px;'
+			style: 'margin-left: 10px'
-						}, {
+		});
+		
+		/*
+		 * Max Upload Speed
+		 */
+		this.fieldsets.bandwidth.add({
 			xtype: 'label',
 			text: _('Max Upload Speed'),
 			forId: 'max_upload_speed',
 			cls: 'x-deluge-options-label'
-						}, {
+		});
+		this.fields.max_upload_speed = this.fieldsets.bandwidth.add({
 			id: 'max_upload_speed',
+			name: 'max_upload_speed',
 			width: 100,
 			value: -1,
-							strategy: new Ext.ux.form.Spinner.NumberStrategy({
+			stragegy: new Ext.ux.form.Spinner.NumberStrategy({
 				minValue: -1,
 				maxValue: 99999,
 				incrementValue: 1
 			})
-						}, {
+		});
+		this.fieldsets.bandwidth.add({
 			xtype: 'label',
-							text: 'KiB/s',
+			text: _('KiB/s'),
-							style: 'margin-left: 10px;'
+			style: 'margin-left: 10px'
-						}, {
+		});
+		
+		/*
+		 * Max Connections
+		 */
+		this.fieldsets.bandwidth.add({
 			xtype: 'label',
 			text: _('Max Connections'),
 			forId: 'max_connections',
 			cls: 'x-deluge-options-label'
-						}, {
+		});
+		this.fields.max_connections = this.fieldsets.bandwidth.add({
 			id: 'max_connections',
-							colspan: 2,
+			name: 'max_connections',
 			width: 100,
 			value: -1,
-							strategy: new Ext.ux.form.Spinner.NumberStrategy({
+			stragegy: new Ext.ux.form.Spinner.NumberStrategy({
 				minValue: -1,
 				maxValue: 99999,
 				incrementValue: 1
 			})
-						}, {
+		});
+		this.fieldsets.bandwidth.add({xtype: 'label'});
+		
+		/*
+		 * Max Upload Slots
+		 */
+		this.fieldsets.bandwidth.add({
 			xtype: 'label',
 			text: _('Max Upload Slots'),
 			forId: 'max_upload_slots',
 			cls: 'x-deluge-options-label'
-						}, {
+		});
+		this.fields.max_upload_slots = this.fieldsets.bandwidth.add({
 			id: 'max_upload_slots',
-							colspan: 2,
+			name: 'max_upload_slots',
 			width: 100,
 			value: -1,
-							strategy: new Ext.ux.form.Spinner.NumberStrategy({
+			stragegy: new Ext.ux.form.Spinner.NumberStrategy({
 				minValue: -1,
 				maxValue: 99999,
 				incrementValue: 1
 			})
-						}]
+		});
-					}]
+
-				}, {
+		/*
-					bodyStyle: 'padding-left: 5px; padding-right:5px;',
+		 * Queue Options
-					width: 200,
+		 */
-					items: [{
+		this.fieldsets.queue = this.add({
 			xtype: 'fieldset',
 			title: _('Queue'),
-						autoHeight: true,
+			style: 'margin-left: 5px; margin-right: 5px; padding: 5px',
-						labelWidth: 1,
-						defaultType: 'checkbox',
-						items: [{
-							fieldLabel: '',
-							labelSeparator: '',
-							boxLabel: _('Auto Managed'),
-							id: 'is_auto_managed'
-						}, {
-							fieldLabel: '',
-							labelSeparator: '',
-							boxLabel: _('Stop seed at ratio'),
-							id: 'stop_at_ratio'
-						}, {
-							fieldLabel: '',
-							labelSeparator: '',
-							boxLabel: _('Remove at ratio'),
-							id: 'remove_at_ratio'
-						}, {
-							fieldLabel: '',
-							labelSeparator: '',
-							boxLabel: _('Move Completed'),
-							id: 'move_completed'
-						}]
-					}]
-				}, {
-					bodyStyle: 'padding-left:5px;',
 			width: 200,
-					items: [{
+			defaults: {
+				fieldLabel: '',
+				labelSeparator: ''
+			}
+		});
+		
+		this.fields.is_auto_managed = this.fieldsets.queue.add({
+			fieldLabel: '',
+			labelSeparator: '',
+			id: 'is_auto_managed',
+			boxLabel: _('Auto Managed')
+		});
+		
+		this.fields.stop_at_ratio = this.fieldsets.queue.add({
+			fieldLabel: '',
+			labelSeparator: '',
+			id: 'stop_at_ratio',
+			boxLabel: _('Stop seed at ratio')
+		});
+		
+		this.fields.remove_at_ratio = this.fieldsets.queue.add({
+			fieldLabel: '',
+			labelSeparator: '',
+			id: 'remove_at_ratio',
+			boxLabel: _('Remove at ratio')
+		});
+		
+		this.fields.move_completed = this.fieldsets.queue.add({
+			fieldLabel: '',
+			labelSeparator: '',
+			id: 'move_completed',
+			boxLabel: _('Move Completed')
+		});
+		
+		
+		/*
+		 * General Options
+		 */
+		this.rightColumn =  this.add({
+			border: false,
+			autoHeight: true,
+			style: 'margin-left: 5px',
+			width: 200
+		});
+		
+		this.fieldsets.general = this.rightColumn.add({
 			xtype: 'fieldset',
-						title: _('General'),
 			autoHeight: true,
 			defaultType: 'checkbox',
-						labelWidth: 1,
+			title: _('General'),
-						items: [{
+			layout: 'form'
+		});
+		
+		this.fields['private'] = this.fieldsets.general.add({
 			fieldLabel: '',
 			labelSeparator: '',
 			boxLabel: _('Private'),
 			id: 'private'
-						}, {
+		});
+		
+		this.fields.prioritize_first_last = this.fieldsets.general.add({
 			fieldLabel: '',
 			labelSeparator: '',
 			boxLabel: _('Prioritize First/Last'),
 			id: 'prioritize_first_last'
-						}]
+		});
-					}, {
+		
+		/*
+		 * Buttons
+		 */
+		this.buttonPanel = this.rightColumn.add({
 			layout: 'column',
-						border: false,
+			xtype: 'panel',
-						defaults: {border: false},
+			border: false
-						items: [{
+		});
-							items: [{
+		
+		// The buttons below are required to be added to a panel
+		// first as simply adding them to the column layout throws an
+		// error c.getSize() does not exist
+		
+		/*
+		 * Edit Trackers button
+		 */
+		this.buttonPanel.add({
+			xtype: 'panel',
+			border: false
+		}).add({
 			id: 'edit_trackers',
 			xtype: 'button',
 			text: _('Edit Trackers'),
@@ -198,22 +273,22 @@ Ext.deluge.details.OptionsTab = Ext.extend(Ext.form.FormPanel, {
 			width: 100,
 			handler: this.onEditTrackers,
 			scope: this
-							}]
+		});
-						}, {
+		
-							items: [{
+		/*
+		 * Apply button
+		 */
+		this.buttonPanel.add({
+			xtype: 'panel',
+			border: false
+		}).add({
 			id: 'apply',
 			xtype: 'button',
 			text: _('Apply'),
-								style: 'margin-left: 10px',
+			style: 'margin-left: 10px;',
 			border: false,
-								width: 100
+			width: 100,
-							}]
+		});
-						}]
-					}]
-				}]
-			}]
-		}, config);
-		Ext.deluge.details.OptionsTab.superclass.constructor.call(this, config);
 	},
 	
 	onRender: function(ct, position) {
@@ -224,17 +299,15 @@ Ext.deluge.details.OptionsTab = Ext.extend(Ext.form.FormPanel, {
 	},
 	
 	clear: function() {
-		var form = this.getForm();
+		this.fields.max_download_speed.setValue(0);
-		//form.findField('max_download_speed').setValue(0);
+		this.fields.max_upload_speed.setValue(0);
-		//form.findField('max_upload_speed').setValue(0);
+		this.fields.max_connections.setValue(0);
-		//form.findField('max_connections').setValue(0);
+		this.fields.max_upload_slots.setValue(0);
-		//form.findField('max_upload_slots').setValue(0);
+		this.fields.is_auto_managed.setValue(false);
-		//form.findField('stop_ratio').setValue(0);
+		this.fields.stop_at_ratio.setValue(false);
-		//form.findField('is_auto_managed').setValue(false);
+		this.fields.remove_at_ratio.setValue(false);
-		//form.findField('stop_at_ratio').setValue(false);
+		this.fields['private'].setValue(false);
-		//form.findField('remove_at_ratio').setValue(false);
+		this.fields.prioritize_first_last.setValue(false);
-		//form.findField('private').setValue(false);
-		//form.findField('prioritize_first_last').setValue(false);
 	},
 	
 	reset: function() {