milestone number 1, web interface loads now

16 files changed, 218 insertions, 179 deletions

diff --git a/deluge/ui/web/js/deluge-all/AddConnectionWindow.js b/deluge/ui/web/js/deluge-all/AddConnectionWindow.js
index 171a8b6da..1878a9e1f 100644
--- a/deluge/ui/web/js/deluge-all/AddConnectionWindow.js
+++ b/deluge/ui/web/js/deluge-all/AddConnectionWindow.js
@@ -52,10 +52,22 @@ Ext.define('Deluge.AddConnectionWindow', {
 
         this.addEvents('hostadded');
 
-        this.addButton(_('Close'), this.hide, this);
-        this.addButton(_('Add'), this.onAddClick, this);
+        this.addDocked({
+            xtype: 'toolbar',
+            dock: 'bottom',
+            defaultType: 'button',
+            items: [
+                '->',
+                {text: _('Close'), handler: function() {
+                    this.setVisible(false);
+                }, scope: this},
+                {text: _('Add'), handler: this.onAddClick, scope: this}
+            ]
+        });
 
-        this.on('hide', this.onHide, this);
+        this.on('hide', function() {
+            this.form.getForm().reset();
+        }, this);
 
         this.form = this.add({
             xtype: 'form',
@@ -65,28 +77,22 @@ Ext.define('Deluge.AddConnectionWindow', {
             items: [{
                 fieldLabel: _('Host'),
                 name: 'host',
-                anchor: '75%',
                 value: ''
             }, {
-                xtype: 'spinnerfield',
+                xtype: 'numberfield',
                 fieldLabel: _('Port'),
                 name: 'port',
-                strategy: {
-                    xtype: 'number',
-                    decimalPrecision: 0,
-                    minValue: -1,
-                    maxValue: 65535
-                },
-                value: '58846',
-                anchor: '40%'
+                width: 175,
+                value: 58846,
+                minValue: -1,
+                maxValue: 65535,
+                decimalPrecision: 0,
             }, {
                 fieldLabel: _('Username'),
                 name: 'username',
-                anchor: '75%',
                 value: ''
             }, {
                 fieldLabel: _('Password'),
-                anchor: '75%',
                 name: 'password',
                 inputType: 'password',
                 value: ''
@@ -114,9 +120,5 @@ Ext.define('Deluge.AddConnectionWindow', {
             },
             scope: this
         });
-    },
-
-    onHide: function() {
-        this.form.getForm().reset();
     }
 });
diff --git a/deluge/ui/web/js/deluge-all/ConnectionManager.js b/deluge/ui/web/js/deluge-all/ConnectionManager.js
index d02ee9d4d..ef9bcc4be 100644
--- a/deluge/ui/web/js/deluge-all/ConnectionManager.js
+++ b/deluge/ui/web/js/deluge-all/ConnectionManager.js
@@ -72,7 +72,8 @@ Ext.define('Deluge.ConnectionManager', {
                     type: 'memory',
                     reader: {
                         type: 'json',
-                        root: 'hosts'
+                        root: 'hosts',
+                        idProperty: 'id'
                     }
                 }
             }),
@@ -102,7 +103,7 @@ Ext.define('Deluge.ConnectionManager', {
                 {xtype: 'button', text: _('Add'), iconCls: 'icon-add', handler: this.onAddClick, scope: this},
                 {xtype: 'button', text: _('Remove'), iconCls: 'icon-remove', handler: this.onRemoveClick, scope: this},
                 '->',
-                {xtype: 'button', text: _('Stop Daemon'), iconCls: 'icon-error', handler: this.onStopClick, scope: this}
+                {xtype: 'button', text: _('Stop Daemon'), iconCls: 'icon-error', handler: this.onStopClick, scope: this, disabled: true}
             ]
         });
 
@@ -143,7 +144,7 @@ Ext.define('Deluge.ConnectionManager', {
 
     update: function() {
         this.grid.getStore().each(function(r) {
-            deluge.client.web.get_host_status(r.id, {
+            deluge.client.web.get_host_status(r.getId(), {
                 success: this.onGetHostStatus,
                 scope: this
             });
@@ -156,21 +157,23 @@ Ext.define('Deluge.ConnectionManager', {
      * @param {Ext.data.Record} record The hosts record to update the UI for
      */
     updateButtons: function(record) {
-        var button = this.buttons[1], status = record.get('status');
+        var btns = this.query('toolbar[dock=bottom] button'),
+            btn = btns[4],
+            s = record.get('status');
 
         // Update the Connect/Disconnect button
-        if (status == _('Connected')) {
-            button.enable();
-            button.setText(_('Disconnect'));
-        } else if (status == _('Offline')) {
-            button.disable();
+        if (s == _('Connected')) {
+            btn.enable();
+            btn.setText(_('Disconnect'));
+        } else if (s == _('Offline')) {
+            btn.disable();
         } else {
-            button.enable();
-            button.setText(_('Connect'));
+            btn.enable();
+            btn.setText(_('Connect'));
         }
 
         // Update the Stop/Start Daemon button
-        if (status == _('Offline')) {
+        if (s == _('Offline')) {
             if (record.get('host') == '127.0.0.1' || record.get('host') == 'localhost') {
                 this.stopHostButton.enable();
                 this.stopHostButton.setText(_('Start Daemon'));
@@ -204,7 +207,9 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onConnect: function(e) {
-        var selected = this.grid.getSelectedRecords()[0];
+        var sm = this.grid.getSelectionModel(),
+            selected = sm.getLastSelected();
+
         if (!selected) return;
 
         if (selected.get('status') == _('Connected')) {
@@ -216,8 +221,7 @@ Ext.define('Deluge.ConnectionManager', {
                 scope: this
             });
         } else {
-            var id = selected.id;
-            deluge.client.web.connect(id, {
+            deluge.client.web.connect(selected.getId(), {
                 success: function(methods) {
                     deluge.client.reloadMethods();
                     deluge.client.on('connected', function(e) {
@@ -231,9 +235,13 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onGetHosts: function(hosts) {
-        this.grid.getStore().loadData(hosts);
+        // FIXME: Why on earth do I need to do it like this?!
+        var store = this.grid.getStore(),
+            results = store.proxy.reader.readRecords(hosts);
+        store.loadRecords(results.records);
+
         Ext.each(hosts, function(host) {
-            deluge.client.web.get_host_status(host[0], {
+            deluge.client.web.get_host_status(host['id'], {
                 success: this.onGetHostStatus,
                 scope: this
             });
@@ -242,11 +250,14 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onGetHostStatus: function(host) {
-        var record = this.grid.getStore().getById(host[0]);
-        record.set('status', host[3])
-        record.set('version', host[4])
+        var record = this.grid.getStore().getById(host['id']);
+        record.set('status', host['status'])
+        record.set('version', host['version'])
         record.commit();
-        if (this.grid.getSelectedRecords()[0] == record) this.updateButtons(record);
+
+        if (this.grid.getSelectionModel().isSelected(record)) {
+            this.updateButtons(record);
+        }
     },
 
     // private
@@ -283,10 +294,12 @@ Ext.define('Deluge.ConnectionManager', {
 
     // private
     onRemoveClick: function(button) {
-        var connection = this.grid.getSelectedRecords()[0];
-        if (!connection) return;
+        var sm = this.grid.getSelectionModel(),
+            selected = sm.getLastSelected();
+
+        if (!selected) return;
 
-        deluge.client.web.remove_host(connection.id, {
+        deluge.client.web.remove_host(selected.getId(), {
             success: function(result) {
                 if (!result) {
                     Ext.MessageBox.show({
@@ -298,7 +311,7 @@ Ext.define('Deluge.ConnectionManager', {
                         iconCls: 'x-deluge-icon-error'
                     });
                 } else {
-                    this.grid.getStore().remove(connection);
+                    this.grid.getStore().remove(selected);
                 }
             },
             scope: this
@@ -306,12 +319,12 @@ Ext.define('Deluge.ConnectionManager', {
     },
 
     // private
-    onSelectionChanged: function(list, selections) {
+    onSelectionChanged: function(grid, selections) {
         if (selections[0]) {
             this.removeHostButton.enable();
             this.stopHostButton.enable();
             this.stopHostButton.setText(_('Stop Daemon'));
-            this.updateButtons(this.grid.getRecord(selections[0]));
+            this.updateButtons(selections[0]);
         } else {
             this.removeHostButton.disable();
             this.stopHostButton.disable();
@@ -322,10 +335,10 @@ Ext.define('Deluge.ConnectionManager', {
     // private
     onShow: function() {
         if (!this.addHostButton) {
-            var bbar = this.grid.getDockedItems()[0];
-            this.addHostButton = bbar.items.get('cm-add');
-            this.removeHostButton = bbar.items.get('cm-remove');
-            this.stopHostButton = bbar.items.get('cm-stop');
+            var buttons = this.grid.query('button');
+            this.addHostButton = buttons[0];
+            this.removeHostButton = buttons[1];
+            this.stopHostButton = buttons[2];
         }
         this.loadHosts();
         if (this.running) return;
diff --git a/deluge/ui/web/js/deluge-all/Deluge.js b/deluge/ui/web/js/deluge-all/Deluge.js
index 514294408..befaec225 100644
--- a/deluge/ui/web/js/deluge-all/Deluge.js
+++ b/deluge/ui/web/js/deluge-all/Deluge.js
@@ -1,6 +1,6 @@
 /*!
  * Deluge.js
- * 
+ *
  * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -56,7 +56,7 @@ Ext.apply(Ext, {
         }
         return equal;
     },
-    
+
     keys: function(obj) {
         var keys = [];
         for (var i in obj) if (obj.hasOwnProperty(i))
@@ -75,7 +75,7 @@ Ext.apply(Ext, {
         }
         return values;
     },
-        
+
     splat: function(obj) {
         var type = Ext.type(obj);
         return (type) ? ((type != 'array') ? [obj] : obj) : [];
@@ -90,7 +90,7 @@ Ext.apply(Deluge, {
 
     // private
     pluginStore: {},
-    
+
     // private
     progressTpl:    '<div class="x-progress-wrap x-progress-renderered">' +
                         '<div class="x-progress-inner">' +
@@ -105,7 +105,7 @@ Ext.apply(Deluge, {
                         '</div>' +
                     '</div>',
 
-    
+
     /**
      * A method to create a progress bar that can be used by renderers
      * to display a bar within a grid or tree.
@@ -119,7 +119,7 @@ Ext.apply(Deluge, {
         var progressWidth = ((width / 100.0) * progress).toFixed(0);
         var barWidth = progressWidth - 1;
         var textWidth = ((progressWidth - modifier) > 0 ? progressWidth - modifier : 0);
-        return String.format(Deluge.progressTpl, text, width, barWidth, textWidth);
+        return Ext.String.format(Deluge.progressTpl, text, width, barWidth, textWidth);
     },
 
     /**
@@ -146,7 +146,7 @@ Ext.apply(Deluge, {
     registerPlugin: function(name, plugin) {
         Deluge.pluginStore[name] = plugin;
     }
-    
+
 });
 
 // Setup a space for plugins to insert themselves
diff --git a/deluge/ui/web/js/deluge-all/EventsManager.js b/deluge/ui/web/js/deluge-all/EventsManager.js
index 941f282ce..1f98e54c5 100644
--- a/deluge/ui/web/js/deluge-all/EventsManager.js
+++ b/deluge/ui/web/js/deluge-all/EventsManager.js
@@ -36,10 +36,11 @@
  * <p>Deluge.EventsManager is instantated as <tt>deluge.events</tt> and can be used by components of the UI to fire global events</p>
  * Class for holding global events that occur within the UI.
  */
-Deluge.EventsManager = Ext.extend(Ext.util.Observable, {
+Ext.define('Deluge.EventsManager', {
+    extend: 'Ext.util.Observable',
+    toRegister: [],
 
     constructor: function() {
-        this.toRegister = [];
         this.on('login', this.onLogin, this);
         this.callParent(arguments);
     },
@@ -55,8 +56,9 @@ Deluge.EventsManager = Ext.extend(Ext.util.Observable, {
             } else {
                 deluge.client.web.register_event_listener(eventName);
             }
+        } else {
+            this.callParent(arguments);
         }
-        this.callParent(arguments);
     },
 
     getEvents: function() {
diff --git a/deluge/ui/web/js/deluge-all/FilterPanel.js b/deluge/ui/web/js/deluge-all/FilterPanel.js
index 703836d77..08447c514 100644
--- a/deluge/ui/web/js/deluge-all/FilterPanel.js
+++ b/deluge/ui/web/js/deluge-all/FilterPanel.js
@@ -1,7 +1,7 @@
 /*!
  * Deluge.FilterPanel.js
  *
- * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
+ * Copyright (c) Damien Churchill 2009-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
@@ -35,16 +35,15 @@ Ext.ns('Deluge');
  * @class Deluge.FilterPanel
  * @extends Ext.list.ListView
  */
-Deluge.FilterPanel = Ext.extend(Ext.Panel, {
+Ext.define('Deluge.FilterPanel', {
+    extend: 'Ext.Panel',
 
     autoScroll: true,
-
     border: false,
-
     show_zero: null,
 
     initComponent: function() {
-        Deluge.FilterPanel.superclass.initComponent.call(this);
+        this.callParent(arguments);
         this.filterType = this.initialConfig.filter;
 
         var title = this.filterType.replace('_', ' '),
@@ -62,8 +61,8 @@ Deluge.FilterPanel = Ext.extend(Ext.Panel, {
             var tpl = '<div class="x-deluge-filter x-deluge-{filter:lowercase}">{filter} ({count})</div>';
         }
 
-        this.list = this.add({
-            xtype: 'listview',
+        this.grid = this.add({
+            xtype: 'grid',
             singleSelect: true,
             hideHeaders: true,
             reserveScrollOffset: true,
@@ -78,7 +77,7 @@ Deluge.FilterPanel = Ext.extend(Ext.Panel, {
                 dataIndex: 'filter'
             }]
         });
-        this.relayEvents(this.list, ['selectionchange']);
+        this.relayEvents(this.grid, ['selectionchange']);
     },
 
     /**
@@ -86,11 +85,13 @@ Deluge.FilterPanel = Ext.extend(Ext.Panel, {
      * @returns {String} the current filter state
      */
     getState: function() {
-        if (!this.list.getSelectionCount()) return;
+        var sm = this.grid.getSelectionModel()
+        if (!sm.hasSelection()) return;
 
-        var state = this.list.getSelectedRecords()[0];
-        if (state.id == 'All') return;
-        return state.id;
+        var state = sm.getLastSelected(),
+            stateId = state.getId();
+        if (stateId == 'All') return;
+        return stateId;
     },
 
     /**
@@ -105,7 +106,7 @@ Deluge.FilterPanel = Ext.extend(Ext.Panel, {
      * @returns {Ext.data.Store} the ListView store
      */
     getStore: function() {
-        return this.list.getStore();
+        return this.grid.getStore();
     },
 
     /**
@@ -128,16 +129,17 @@ Deluge.FilterPanel = Ext.extend(Ext.Panel, {
             states = newStates;
         }
 
-        var store = this.getStore();
-        var filters = {};
+        var store = this.getStore(),
+            sm = this.grid.getSelectionModel(),
+            filters = {};
         Ext.each(states, function(s, i) {
             var record = store.getById(s[0]);
             if (!record) {
-                record = new store.recordType({
+                var record = store.add({
                     filter: s[0],
                     count: s[1]
-                });
-                record.id = s[0];
+                })[0];
+                record.setId(s[0]);
                 store.insert(i, record);
             }
             record.beginEdit();
@@ -148,18 +150,18 @@ Deluge.FilterPanel = Ext.extend(Ext.Panel, {
         }, this);
 
         store.each(function(record) {
-            if (filters[record.id]) return;
-            var r = this.list.getSelectedRecords()[0];
+            if (filters[record.getId()]) return;
+            var r = sm.getLastSelected();
             store.remove(record);
             if (r.id == record.id) {
-                this.list.select(0);
+                sm.select(0);
             }
         }, this);
 
-        store.commitChanges();
+        store.sync();
 
-        if (!this.list.getSelectionCount()) {
-            this.list.select(0);
+        if (!sm.hasSelection()) {
+            sm.select(0);
         }
     }
 
diff --git a/deluge/ui/web/js/deluge-all/Formatters.js b/deluge/ui/web/js/deluge-all/Formatters.js
index 0ea3b6903..5c909987c 100644
--- a/deluge/ui/web/js/deluge-all/Formatters.js
+++ b/deluge/ui/web/js/deluge-all/Formatters.js
@@ -1,6 +1,6 @@
 /*!
  * Deluge.Formatters.js
- * 
+ *
  * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -56,11 +56,11 @@ Deluge.Formatters = {
         }
         timestamp = timestamp * 1000;
         var date = new Date(timestamp);
-        return String.format('{0}/{1}/{2} {3}:{4}:{5}',
+        return Ext.String.format('{0}/{1}/{2} {3}:{4}:{5}',
             zeroPad(date.getDate(), 2), zeroPad(date.getMonth() + 1, 2), date.getFullYear(),
             zeroPad(date.getHours(), 2), zeroPad(date.getMinutes(), 2), zeroPad(date.getSeconds(), 2));
     },
-    
+
     /**
      * Formats the bytes value into a string with KiB, MiB or GiB units.
      *
@@ -71,16 +71,16 @@ Deluge.Formatters = {
     size: function(bytes, showZero) {
         if (!bytes && !showZero) return '';
         bytes = bytes / 1024.0;
-    
+
         if (bytes < 1024) { return bytes.toFixed(1)  + ' KiB'; }
         else { bytes = bytes / 1024; }
-    
+
         if (bytes < 1024) { return bytes.toFixed(1)  + ' MiB'; }
         else { bytes = bytes / 1024; }
-    
+
         return bytes.toFixed(1) + ' GiB'
     },
-    
+
     /**
      * Formats a string to display a transfer speed utilizing {@link #size}
      *
@@ -91,7 +91,7 @@ Deluge.Formatters = {
     speed: function(bytes, showZero) {
         return (!bytes && !showZero) ? '' : fsize(bytes, showZero) + '/s';
     },
-    
+
     /**
      * Formats a string to show time in a human readable form.
      *
@@ -103,7 +103,7 @@ Deluge.Formatters = {
         time = time.toFixed(0);
         if (time < 60) { return time + 's'; }
         else { time = time / 60; }
-    
+
         if (time < 60) {
             var minutes = Math.floor(time)
             var seconds = Math.round(60 * (time - minutes))
@@ -113,18 +113,18 @@ Deluge.Formatters = {
                 return minutes + 'm'; }
             }
         else { time = time / 60; }
-    
-        if (time < 24) { 
+
+        if (time < 24) {
             var hours = Math.floor(time)
             var minutes = Math.round(60 * (time - hours))
             if (minutes > 0) {
                 return hours + 'h ' + minutes + 'm';
             } else {
                 return hours + 'h';
-            }            
+            }
         }
         else { time = time / 24; }
-    
+
         var days = Math.floor(time)
         var hours = Math.round(24 * (time - days))
         if (hours > 0) {
@@ -133,7 +133,7 @@ Deluge.Formatters = {
             return days + 'd';
         }
     },
-    
+
     /**
      * Simply returns the value untouched, for when no formatting is required.
      *
diff --git a/deluge/ui/web/js/deluge-all/OtherLimitWindow.js b/deluge/ui/web/js/deluge-all/OtherLimitWindow.js
index 28c647d9a..1fee96176 100644
--- a/deluge/ui/web/js/deluge-all/OtherLimitWindow.js
+++ b/deluge/ui/web/js/deluge-all/OtherLimitWindow.js
@@ -1,7 +1,7 @@
 /*!
  * Deluge.OtherLimitWindow.js
- * 
- * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
+ *
+ * Copyright (c) Damien Churchill 2009-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
@@ -29,14 +29,14 @@
  * 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.OtherLimitWindow
  * @extends Ext.Window
  */
-Deluge.OtherLimitWindow = Ext.extend(Ext.Window, {
-    
+Ext.define('Deluge.OtherLimitWindow', {
+    extend: 'Ext.Window',
+
     layout: 'fit',
     width: 210,
     height: 100,
@@ -44,7 +44,7 @@ Deluge.OtherLimitWindow = Ext.extend(Ext.Window, {
     closeAction: 'hide',
 
     initComponent: function() {
-        Deluge.OtherLimitWindow.superclass.initComponent.call(this);
+        this.callParent(arguments);
         this.form = this.add({
             xtype: 'form',
             baseCls: 'x-plain',
@@ -69,8 +69,17 @@ Deluge.OtherLimitWindow = Ext.extend(Ext.Window, {
             this.setSize(180, 100);
         }
 
-        this.addButton(_('Cancel'), this.onCancelClick, this);
-        this.addButton(_('Ok'), this.onOkClick, this);
+        this.addDocked({
+            xtype: 'toolbar',
+            dock: 'bottom',
+            defaultType: 'button',
+            items: [
+                '->',
+                {text: _('Cancel'), handler: this.onCancelClick, scope: this},
+                {text: _('Ok'), handler: this.onOkClick, scope: this}
+            ]
+        });
+
         this.afterMethod('show', this.doFocusField, this);
     },
 
diff --git a/deluge/ui/web/js/deluge-all/Sidebar.js b/deluge/ui/web/js/deluge-all/Sidebar.js
index 12f3c9347..7a0984135 100644
--- a/deluge/ui/web/js/deluge-all/Sidebar.js
+++ b/deluge/ui/web/js/deluge-all/Sidebar.js
@@ -40,7 +40,19 @@
  * @version 1.3
  */
 Ext.define('Deluge.Sidebar', {
-    extend: 'Ext.Panel',
+    extend: 'Ext.panel.Panel',
+
+    id: 'sidebar',
+    region: 'west',
+    cls: 'deluge-sidebar',
+    title: _('Filters'),
+    layout: 'accordion',
+    split: true,
+    width: 200,
+    minSize: 175,
+    collapsible: true,
+    margins: '5 0 0 5',
+    cmargins: '5 0 0 5',
 
     // private
     panels: {},
@@ -48,23 +60,6 @@ Ext.define('Deluge.Sidebar', {
     // private
     selected: null,
 
-    constructor: function(config) {
-        config = Ext.apply({
-            id: 'sidebar',
-            region: 'west',
-            cls: 'deluge-sidebar',
-            title: _('Filters'),
-            layout: 'accordion',
-            split: true,
-            width: 200,
-            minSize: 175,
-            collapsible: true,
-            margins: '5 0 0 5',
-            cmargins: '5 0 0 5'
-        }, config);
-        this.callParent(arguments);
-    },
-
     // private
     initComponent: function() {
         this.callParent(arguments);
diff --git a/deluge/ui/web/js/deluge-all/Statusbar.js b/deluge/ui/web/js/deluge-all/Statusbar.js
index 4f1c48f86..133e46bfa 100644
--- a/deluge/ui/web/js/deluge-all/Statusbar.js
+++ b/deluge/ui/web/js/deluge-all/Statusbar.js
@@ -1,7 +1,7 @@
 /*!
  * Deluge.Statusbar.js
- * 
- * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
+ *
+ * Copyright (c) Damien Churchill 2009-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
@@ -29,25 +29,21 @@
  * 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');
 
-Deluge.Statusbar = Ext.extend(Ext.ux.StatusBar, {
-    constructor: function(config) {
-        config = Ext.apply({
-            id: 'deluge-statusbar',
-            defaultIconCls: 'x-deluge-statusbar x-not-connected',
-            defaultText: _('Not Connected')
-        }, config);
-        Deluge.Statusbar.superclass.constructor.call(this, config);
-    },
-    
+Ext.define('Deluge.StatusBar', {
+    extend: 'Ext.ux.statusbar.StatusBar',
+
+    id: 'deluge-statusbar',
+    defaultIconCls: 'x-deluge-statusbar x-not-connected',
+    defaultText: _('Not Connected'),
+
     initComponent: function() {
-        Deluge.Statusbar.superclass.initComponent.call(this);
-        
+        this.callParent(arguments);
+
         deluge.events.on('connect', this.onConnect, this);
         deluge.events.on('disconnect', this.onDisconnect, this);
     },
-    
+
     createButtons: function() {
         this.buttons = this.add({
             id: 'statusbar-connections',
@@ -221,7 +217,7 @@ Deluge.Statusbar = Ext.extend(Ext.ux.StatusBar, {
         });
         this.created = true;
     },
-    
+
     onConnect: function() {
         this.setStatus({
             iconCls: 'x-connected',
@@ -246,18 +242,18 @@ Deluge.Statusbar = Ext.extend(Ext.ux.StatusBar, {
         });
         this.doLayout();
     },
-    
+
     update: function(stats) {
         if (!stats) return;
-        
+
         function addSpeed(val) {return val + ' KiB/s'}
-        
-        var updateStat = function(name, config) {
+
+        var updateStat = Ext.bind(function(name, config) {
             var item = this.items.get('statusbar-' + name);
             if (config.limit.value > 0) {
                 var value = (config.value.formatter) ? config.value.formatter(config.value.value, true) : config.value.value;
                 var limit = (config.limit.formatter) ? config.limit.formatter(config.limit.value, true) : config.limit.value;
-                var str = String.format(config.format, value, limit);
+                var str = Ext.String.format(config.format, value, limit);
             } else {
                 var str = (config.value.formatter) ? config.value.formatter(config.value.value, true) : config.value.value;
             }
@@ -265,8 +261,8 @@ Deluge.Statusbar = Ext.extend(Ext.ux.StatusBar, {
 
             if (!item.menu) return;
             item.menu.setValue(config.limit.value);
-        }.createDelegate(this);
-        
+        }, this);
+
         updateStat('connections', {
             value: {value: stats.num_connections},
             limit: {value: stats.max_num_connections},
diff --git a/deluge/ui/web/js/deluge-all/TorrentGrid.js b/deluge/ui/web/js/deluge-all/TorrentGrid.js
index a468c010a..f22286ace 100644
--- a/deluge/ui/web/js/deluge-all/TorrentGrid.js
+++ b/deluge/ui/web/js/deluge-all/TorrentGrid.js
@@ -35,29 +35,29 @@ function queueRenderer(value) {
     return (value == -1) ? '' : value + 1;
 }
 function torrentNameRenderer(value, p, r) {
-    return String.format('<div class="torrent-name x-deluge-{0}">{1}</div>', r.data['state'].toLowerCase(), value);
+    return Ext.String.format('<div class="torrent-name x-deluge-{0}">{1}</div>', r.data['state'].toLowerCase(), value);
 }
 function torrentSpeedRenderer(value) {
     if (!value) return;
     return fspeed(value);
 }
-function torrentProgressRenderer(value, p, r) {
+function torrentProgressRenderer(value, md, r) {
     value = new Number(value);
-    var progress = value;
-    var text = r.data['state'] + ' ' + value.toFixed(2) + '%';
-    var width = new Number(this.style.match(/\w+:\s*(\d+)\w+/)[1]);
+    var width = this.query('gridcolumn[dataIndex=progress]')[0].getWidth(),
+        progress = value,
+        text = r.data['state'] + ' ' + value.toFixed(2) + '%';
     return Deluge.progressBar(value, width - 8, text);
 }
 function seedsRenderer(value, p, r) {
     if (r.data['total_seeds'] > -1) {
-        return String.format('{0} ({1})', value, r.data['total_seeds']);
+        return Ext.String.format('{0} ({1})', value, r.data['total_seeds']);
     } else {
         return value;
     }
 }
 function peersRenderer(value, p, r) {
     if (r.data['total_peers'] > -1) {
-        return String.format('{0} ({1})', value, r.data['total_peers']);
+        return Ext.String.format('{0} ({1})', value, r.data['total_peers']);
     } else {
         return value;
     }
@@ -66,7 +66,7 @@ function availRenderer(value, p, r)    {
     return (value < 0) ? '&infin;' : new Number(value).toFixed(3);
 }
 function trackerRenderer(value, p, r) {
-    return String.format('<div style="background: url(' + deluge.config.base + 'tracker/{0}) no-repeat; padding-left: 20px;">{0}</div>', value);
+    return Ext.String.format('<div style="background: url(' + deluge.config.base + 'tracker/{0}) no-repeat; padding-left: 20px;">{0}</div>', value);
 }
 
 function etaSorter(eta) {
@@ -84,7 +84,7 @@ function dateOrNever(date) {
  * @version 1.3
  *
  * @class Deluge.TorrentGrid
- * @extends Ext.grid.GridPanel
+ * @extends Ext.grid.Panel
  * @constructor
  * @param {Object} config Configuration options
  */
@@ -231,7 +231,7 @@ Ext.define('Deluge.TorrentGrid', {
     },
 
     store: Ext.create('Ext.data.Store', {
-        model: 'Deluge.data.TorrentRecord',
+        model: 'Deluge.data.Torrent',
         proxy: {
             type: 'memory',
             reader: {
@@ -281,14 +281,14 @@ Ext.define('Deluge.TorrentGrid', {
      * @ return {Array/Ext.data.Record} The record(s) representing the rows
      */
     getSelected: function() {
-        return this.getSelectionModel().getSelected();
+        return this.getSelectionModel().getLastSelected();
     },
 
     /**
      * Returns the currently selected records.
      */
     getSelections: function() {
-        return this.getSelectionModel().getSelections();
+        return this.getSelectionModel().getSelection();
     },
 
     /**
@@ -296,7 +296,7 @@ Ext.define('Deluge.TorrentGrid', {
      * @return {String} The currently selected id.
      */
     getSelectedId: function() {
-        return this.getSelectionModel().getSelected().id
+        return this.getSelected().getId()
     },
 
     /**
@@ -305,8 +305,8 @@ Ext.define('Deluge.TorrentGrid', {
      */
     getSelectedIds: function() {
         var ids = [];
-        Ext.each(this.getSelectionModel().getSelections(), function(r) {
-            ids.push(r.id);
+        Ext.each(this.getSelections(), function(r) {
+            ids.push(r.getId());
         });
         return ids;
     },
@@ -337,7 +337,7 @@ Ext.define('Deluge.TorrentGrid', {
                 record.endEdit();
             } else {
                 var record = new Deluge.data.Torrent(torrent);
-                record.id = t;
+                record.setId(t);
                 this.torrents[t] = 1;
                 newTorrents.push(record);
             }
@@ -346,16 +346,15 @@ Ext.define('Deluge.TorrentGrid', {
 
         // Remove any torrents that should not be in the store.
         store.each(function(record) {
-            if (!torrents[record.id]) {
+            if (!torrents[record.getId()]) {
                 store.remove(record);
-                delete this.torrents[record.id];
+                delete this.torrents[record.getId()];
             }
         }, this);
-        store.commitChanges();
+        store.sync();
 
-        var sortState = store.getSortState()
-        if (!sortState) return;
-        store.sort(sortState.field, sortState.direction);
+        // TODO: re-enable this is it's required.
+        //store.sort(store.sorters);
     },
 
     // private
diff --git a/deluge/ui/web/js/deluge-all/UI.js b/deluge/ui/web/js/deluge-all/UI.js
index 865e6fdc8..bab33294e 100644
--- a/deluge/ui/web/js/deluge-all/UI.js
+++ b/deluge/ui/web/js/deluge-all/UI.js
@@ -56,7 +56,7 @@ deluge.ui = {
         deluge.login = Ext.create('Deluge.LoginWindow');
         deluge.preferences = Ext.create('Deluge.preferences.PreferencesWindow');
         deluge.sidebar = Ext.create('Deluge.Sidebar');
-        deluge.statusbar = Ext.create('Deluge.Statusbar');
+        deluge.statusbar = Ext.create('Deluge.StatusBar');
         deluge.toolbar = Ext.create('Deluge.Toolbar');
         deluge.torrents = Ext.create('Deluge.TorrentGrid');
 
diff --git a/deluge/ui/web/js/deluge-all/details/DetailsPanel.js b/deluge/ui/web/js/deluge-all/details/DetailsPanel.js
index 7ff1ed7ba..b34daa144 100644
--- a/deluge/ui/web/js/deluge-all/details/DetailsPanel.js
+++ b/deluge/ui/web/js/deluge-all/details/DetailsPanel.js
@@ -57,7 +57,7 @@ Ext.define('Deluge.details.DetailsPanel', {
     clear: function() {
         this.items.each(function(panel) {
             if (panel.clear) {
-                panel.clear.defer(100, panel);
+                Ext.defer(panel.clear, 100, panel);
                 panel.disable();
             }
         });
diff --git a/deluge/ui/web/js/deluge-all/details/OptionsTab.js b/deluge/ui/web/js/deluge-all/details/OptionsTab.js
index e0925e04f..a8c8b7945 100644
--- a/deluge/ui/web/js/deluge-all/details/OptionsTab.js
+++ b/deluge/ui/web/js/deluge-all/details/OptionsTab.js
@@ -352,9 +352,9 @@ Ext.define('Deluge.details.OptionsTab', {
         this.callParent(arguments);
 
         // This is another hack I think, so keep an eye out here when upgrading.
-        this.layout = new Ext.layout.ColumnLayout();
-        this.layout.setContainer(this);
-        this.doLayout();
+        //this.layout = new Ext.layout.ColumnLayout();
+        //this.layout.setContainer(this);
+        //this.doLayout();
     },
 
     clear: function() {
diff --git a/deluge/ui/web/js/deluge-all/preferences/PluginsPage.js b/deluge/ui/web/js/deluge-all/preferences/PluginsPage.js
index 1a754bbda..327d83f38 100644
--- a/deluge/ui/web/js/deluge-all/preferences/PluginsPage.js
+++ b/deluge/ui/web/js/deluge-all/preferences/PluginsPage.js
@@ -54,6 +54,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
     ),
 
     initComponent: function() {
+        console.log('Plugins preferences page created');
         this.callParent(arguments);
         this.defaultValues = {
             'version': '',
diff --git a/deluge/ui/web/js/ext-extensions/StatusBar.js b/deluge/ui/web/js/ext-extensions/StatusBar.js
index eb2ad9e00..492ff8ad2 100644
--- a/deluge/ui/web/js/ext-extensions/StatusBar.js
+++ b/deluge/ui/web/js/ext-extensions/StatusBar.js
@@ -1,3 +1,17 @@
+/*
+
+This file is part of Ext JS 4
+
+Copyright (c) 2011 Sencha Inc
+
+Contact:  http://www.sencha.com/contact
+
+GNU General Public License Usage
+This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
 /**
  * @class Ext.ux.StatusBar
  * <p>Basic status bar component that can be used as the bottom toolbar of any {@link Ext.Panel}.  In addition to
@@ -416,3 +430,4 @@ statusBar.setStatus({
         return this.setStatus(o);
     }
 });
+
diff --git a/deluge/ui/web/json_api.py b/deluge/ui/web/json_api.py
index 13d60b449..0640b75e7 100644
--- a/deluge/ui/web/json_api.py
+++ b/deluge/ui/web/json_api.py
@@ -727,8 +727,7 @@ class WebApi(JSONComponent):
         """
         Return the hosts in the hostlist.
         """
-        log.debug("get_hosts called")
-        return [(tuple(host[HOSTS_ID:HOSTS_PORT+1]) + (_("Offline"),)) for host in self.host_list["hosts"]]
+        return [dict(zip(('id', 'host', 'port', 'status'), tuple(host[HOSTS_ID:HOSTS_PORT+1]) + (_("Offline"),))) for host in self.host_list["hosts"]]
 
     @export
     def get_host_status(self, host_id):
@@ -740,12 +739,18 @@ class WebApi(JSONComponent):
     	"""
 
         def response(status, info=None):
-            return host_id, host, port, status, info
+            return dict (
+                id      = host_id,
+                host    = host,
+                port    = port,
+                status  = status,
+                version = info
+            )
 
         try:
             host_id, host, port, user, password = self.get_host(host_id)
         except TypeError, e:
-            return response(_("Offline"))
+            return None
 
         def on_connect(connected, c, host_id):
             def on_info(info, c):