web: fix the FilterPanel to a degree

This finishes converting the FilterPanel to use the new data stuff
from ExtJS4 as well as switching from a listview to a gridview.
Currently the Sidebar is still broken.

3 files changed, 75 insertions, 17 deletions

diff --git a/deluge/ui/web/js/deluge-all/FilterPanel.js b/deluge/ui/web/js/deluge-all/FilterPanel.js
index 08447c514..e9370d872 100644
--- a/deluge/ui/web/js/deluge-all/FilterPanel.js
+++ b/deluge/ui/web/js/deluge-all/FilterPanel.js
@@ -29,18 +29,18 @@
  * 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.ns('Deluge');
 
 /**
  * @class Deluge.FilterPanel
- * @extends Ext.list.ListView
+ * @extends Ext.panel.Panel
  */
 Ext.define('Deluge.FilterPanel', {
-    extend: 'Ext.Panel',
+    extend: 'Ext.panel.Panel',
 
     autoScroll: true,
     border: false,
     show_zero: null,
+    title: ' ',
 
     initComponent: function() {
         this.callParent(arguments);
@@ -63,12 +63,15 @@ Ext.define('Deluge.FilterPanel', {
 
         this.grid = this.add({
             xtype: 'grid',
+            border: false,
             singleSelect: true,
             hideHeaders: true,
             reserveScrollOffset: true,
-            store: new Ext.data.ArrayStore({
-                idIndex: 0,
-                fields: ['filter', 'count']
+            store: Ext.create('Ext.data.Store', {
+                model: 'Deluge.data.Filter',
+                proxy: {
+                    type: 'memory'
+                }
             }),
             columns: [{
                 id: 'filter',
@@ -80,6 +83,10 @@ Ext.define('Deluge.FilterPanel', {
         this.relayEvents(this.grid, ['selectionchange']);
     },
 
+    getSelectionModel: function() {
+        return this.grid.getSelectionModel();
+    },
+
     /**
      * Return the currently selected filter state
      * @returns {String} the current filter state
@@ -135,17 +142,18 @@ Ext.define('Deluge.FilterPanel', {
         Ext.each(states, function(s, i) {
             var record = store.getById(s[0]);
             if (!record) {
-                var record = store.add({
+                record = Ext.create('Deluge.data.Filter', {
                     filter: s[0],
-                    count: s[1]
-                })[0];
+                    count: [1]
+                });
                 record.setId(s[0]);
-                store.insert(i, record);
+                store.insert(i, [record]);
+            } else {
+                record.beginEdit();
+                record.set('filter', s[0]);
+                record.set('count', s[1]);
+                record.endEdit();
             }
-            record.beginEdit();
-            record.set('filter', s[0]);
-            record.set('count', s[1]);
-            record.endEdit();
             filters[s[0]] = true;
         }, this);
 
@@ -161,7 +169,7 @@ Ext.define('Deluge.FilterPanel', {
         store.sync();
 
         if (!sm.hasSelection()) {
-            sm.select(0);
+            //sm.select(0);
         }
     }
 
diff --git a/deluge/ui/web/js/deluge-all/Sidebar.js b/deluge/ui/web/js/deluge-all/Sidebar.js
index 7a0984135..e0e283127 100644
--- a/deluge/ui/web/js/deluge-all/Sidebar.js
+++ b/deluge/ui/web/js/deluge-all/Sidebar.js
@@ -82,8 +82,8 @@ Ext.define('Deluge.Sidebar', {
             if (!deluge.config.sidebar_multiple_filters) {
                 deluge.ui.update();
             }
-            if (!panel.list.getSelectionCount()) {
-                panel.list.select(0);
+            if (!panel.getSelectionModel().hasSelection()) {
+                panel.getSelectionModel().select(0);
             }
         });
         this.fireEvent('filtercreate', this, panel);
diff --git a/deluge/ui/web/js/deluge-all/data/FilterRecord.js b/deluge/ui/web/js/deluge-all/data/FilterRecord.js
new file mode 100644
index 000000000..72fbf8147
--- /dev/null
+++ b/deluge/ui/web/js/deluge-all/data/FilterRecord.js
@@ -0,0 +1,50 @@
+/*!
+ * Deluge.data.FilterRecord.js
+ *
+ * Copyright (c) Damien Churchill 2011 <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.
+ */
+
+/**
+ * Deluge.data.Filter record
+ *
+ * @author Damien Churchill <damoxc@gmail.com>
+ * @version 1.4
+ *
+ * @class Deluge.data.Filter
+ * @extends Ext.data.Model
+ * @constructor
+ * @param {Object} data The Filter data
+ */
+Ext.define('Deluge.data.Filter', {
+    extend: 'Ext.data.Model',
+    fields: [
+        {name: 'filter', type: 'string'},
+        {name: 'count', type: 'number'}
+    ]
+});