move the InstallPluginWindow class out of the PluginsPage file

convert the plugins grid over to a listview

deluge/ui/web/js/deluge-all/preferences/InstallPluginWindow.js

@@ -0,0 +1,101 @@
+/*!
+ * Deluge.preferences.InstallPluginWindow.js
+ * 
+ * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, write to:
+ *     The Free Software Foundation, Inc.,
+ *     51 Franklin Street, Fifth Floor
+ *     Boston, MA  02110-1301, USA.
+ *
+ * In addition, as a special exception, the copyright holders give
+ * permission to link the code of portions of this program with the OpenSSL
+ * library.
+ * You must obey the GNU General Public License in all respects for all of
+ * the code used other than OpenSSL. If you modify file(s) with this
+ * exception, you may extend this exception to your version of the file(s),
+ * but you are not obligated to do so. If you do not wish to do so, delete
+ * this exception statement from your version. If you delete this exception
+ * statement from all source files in the program, then also delete it here.
+ */
+Ext.namespace('Deluge.preferences');
+
+/**
+ * @class Deluge.preferences.InstallPluginWindow
+ * @extends Ext.Window
+ */
+Deluge.preferences.InstallPluginWindow = Ext.extend(Ext.Window, {
+
+	title: _('Install Plugin'),
+	layout: 'fit',
+	height: 115,
+	width: 350,
+	
+	bodyStyle: 'padding: 10px 5px;',
+	buttonAlign: 'center',
+	closeAction: 'hide',
+	iconCls: 'x-deluge-install-plugin',
+	modal: true,
+	plain: true,
+
+	initComponent: function() {
+		Deluge.add.FileWindow.superclass.initComponent.call(this);
+		this.addButton(_('Install'), this.onInstall, this);
+		
+		this.form = this.add({
+			xtype: 'form',
+			baseCls: 'x-plain',
+			labelWidth: 70,
+			autoHeight: true,
+			fileUpload: true,
+			items: [{
+				xtype: 'fileuploadfield',
+				id: 'pluginEgg',
+				emptyText: _('Select an egg'),
+				fieldLabel: _('Plugin Egg'),
+				name: 'file',
+				buttonCfg: {
+					text: _('Browse') + '...'
+				}
+			}]
+		});
+	},
+
+	onInstall: function(field, e) {
+		this.form.getForm().submit({
+			url: '/upload',
+			waitMsg: _('Uploading your plugin...'),
+			success: this.onUploadSuccess,
+			scope: this
+		}); 
+	},
+
+	onUploadPlugin: function(info, obj, response, request) {
+		this.fireEvent('pluginadded');
+	},
+
+	onUploadSuccess: function(fp, upload) {
+		this.hide();
+		if (upload.result.success) {
+			var filename = this.form.getForm().findField('pluginEgg').value;
+			var path = upload.result.files[0]
+			this.form.getForm().findField('pluginEgg').setValue('');
+			deluge.client.web.upload_plugin(filename, path, {
+				success: this.onUploadPlugin,
+				scope: this,
+				filename: filename
+			});
+		}
+	}
+});

deluge/ui/web/js/deluge-all/preferences/PluginsPage.js

@@ -31,97 +31,17 @@
  */
 Ext.namespace('Deluge.preferences');
 
-/**
- * @class Deluge.preferences.InstallPluginWindow
- * @extends Ext.Window
- */
-Deluge.preferences.InstallPluginWindow = Ext.extend(Ext.Window, {
-
-	height: 115,
-	width: 350,
-	
-	bodyStyle: 'padding: 10px 5px;',
-
-	buttonAlign: 'center',
-
-	closeAction: 'hide',
-
-	iconCls: 'x-deluge-install-plugin',
-
-	layout: 'fit',
-
-	modal: true,
-
-	plain: true,
-
-	title: _('Install Plugin'),
-
-	initComponent: function() {
-		Deluge.add.FileWindow.superclass.initComponent.call(this);
-		this.addButton(_('Install'), this.onInstall, this);
-		
-		this.form = this.add({
-			xtype: 'form',
-			baseCls: 'x-plain',
-			labelWidth: 70,
-			autoHeight: true,
-			fileUpload: true,
-			items: [{
-				xtype: 'fileuploadfield',
-				id: 'pluginEgg',
-				emptyText: _('Select an egg'),
-				fieldLabel: _('Plugin Egg'),
-				name: 'file',
-				buttonCfg: {
-					text: _('Browse') + '...'
-				}
-			}]
-		});
-	},
-
-	onInstall: function(field, e) {
-		this.form.getForm().submit({
-			url: '/upload',
-			waitMsg: _('Uploading your plugin...'),
-			success: this.onUploadSuccess,
-			scope: this
-		}); 
-	},
-
-	onUploadPlugin: function(info, obj, response, request) {
-		this.fireEvent('pluginadded');
-	},
-
-	onUploadSuccess: function(fp, upload) {
-		this.hide();
-		if (upload.result.success) {
-			var filename = this.form.getForm().findField('pluginEgg').value;
-			var path = upload.result.files[0]
-			this.form.getForm().findField('pluginEgg').setValue('');
-			deluge.client.web.upload_plugin(filename, path, {
-				success: this.onUploadPlugin,
-				scope: this,
-				filename: filename
-			});
-		}
-	}
-});
-
 /**
  * @class Deluge.preferences.Plugins
  * @extends Ext.Panel
  */
 Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
-	constructor: function(config) {
+
-		config = Ext.apply({
+	layout: 'border',
-			border: false,
+	title: _('Plugins'),
-			title: _('Plugins'),
+	border: false,
-			layout: 'border',
+	height: 400,
-			height: 400,
+	cls: 'x-deluge-plugins',
-			cls: 'x-deluge-plugins'
-		}, config);
-		Deluge.preferences.Plugins.superclass.constructor.call(this, config);
-	},
 
 	pluginTemplate: new Ext.Template(
 		'<dl class="singleline">' +
@@ -148,10 +68,9 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
 			return '<div class="x-grid3-check-col'+(v?'-on':'')+'"> </div>';
 		}
 
-		this.grid = this.add({
+		this.list = this.add({
-			xtype: 'grid',
+			xtype: 'listview',
-			region: 'center',
+			store: new Ext.data.ArrayStore({
-			store: new Ext.data.SimpleStore({
 				fields: [
 					{name: 'enabled', mapping: 0},
 					{name: 'plugin', mapping: 1}
@@ -160,30 +79,30 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
 			columns: [{
 				id: 'enabled',
 				header: _('Enabled'),
-				width: 50,
+				width: .2,
 				sortable: true,
-				renderer: checkboxRenderer,
+				tpl: new Ext.XTemplate('{enabled:this.getCheckbox}', {
+					getCheckbox: function(v) {
+						return '<div class="x-grid3-check-col'+(v?'-on':'')+'" rel="chkbox"> </div>';
+					}
+				}),
 				dataIndex: 'enabled'
 			}, {
 				id: 'plugin',
 				header: _('Plugin'),
+				width: .8,
 				sortable: true,
 				dataIndex: 'plugin'
 			}],
-			stripeRows: true,
+			singleSelect: true,
-			selModel: new Ext.grid.RowSelectionModel({
+			autoExpandColumn: 'plugin'
-				singleSelect: true,
+		});
-				listeners: {
+
-					'rowselect': {
+		this.panel = this.add({
-						fn: this.onPluginSelect,
+			region: 'center',
-						scope: this
-					}
-				}
-			}),
-			autoExpandColumn: 'plugin',
-			deferredRender: false,
 			autoScroll: true,
 			margins: '5 5 5 5',
+			items: [this.list],
 			bbar: new Ext.Toolbar({
 				items: [{
 					cls: 'x-btn-text-icon',
@@ -225,7 +144,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
 		});
 	
 		this.pluginInfo.on('render', this.onPluginInfoRender, this);
-		this.grid.on('cellclick', this.onCellClick, this);
+		this.list.on('click', this.onNodeClick, this);
 		deluge.preferences.on('show', this.onPreferencesShow, this);
 		deluge.events.on('PluginDisabledEvent', this.onPluginDisabled, this);
 		deluge.events.on('PluginEnabledEvent', this.onPluginEnabled, this);
@@ -261,12 +180,14 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
 				plugins.push([false, plugin]);
 			}
 		}, this);
-		this.grid.getStore().loadData(plugins);
+		this.list.getStore().loadData(plugins);
 	},
 
-	onCellClick: function(grid, rowIndex, colIndex, e) {
+	onNodeClick: function(dv, index, node, e) {
-		if (colIndex != 0) return;
+		var el = new Ext.Element(e.target);
-		var r = grid.getStore().getAt(rowIndex);
+		if (el.getAttribute('rel') != 'chkbox') return;
+
+		var r = dv.getStore().getAt(index);
 		r.set('enabled', !r.get('enabled'));
 		r.commit();
 		if (r.get('enabled')) {
@@ -316,9 +237,9 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
 	},
 	
 	onPluginDisabled: function(pluginName) {
-		var index = this.grid.getStore().find('plugin', pluginName);
+		var index = this.list.getStore().find('plugin', pluginName);
 		if (index == -1) return;
-		var plugin = this.grid.getStore().getAt(index);
+		var plugin = this.list.getStore().getAt(index);
 		plugin.set('enabled', false);
 		plugin.commit();
 	},