web: big update for ext4.0.7 compatibility

Lots of changes here:

 * Switched to using Ext.create over new Object()
 * Add torrent window is now half working
 * Begin the makings of DnD add torrent file

deluge/ui/web/css/deluge.css

@@ -41,6 +41,18 @@ input {
 	height:     auto;
 }
 
+.x-deluge-dropzone {
+	position: absolute;
+	z-index: 1;
+	margin: 10px;
+	border: 2px dashed black;
+	width: 420px;
+	height: 110px;
+	line-height: 110px;
+	text-align: center;
+	font-size: 2em;
+}
+
 .x-deluge-main-panel {
 	background-image: url('../icons/deluge.png');
 }
@@ -177,7 +189,7 @@ dl.singleline dd {
 .x-deluge-add-torrent-name-loading {
 	padding-left: 20px;
 	line-height: 20px;
-	background: url('/themes/default/tree/loading.gif') no-repeat 2px;
+	background: url('/resources/themes/images/default/tree/loading.gif') no-repeat 2px;
 }
 
 /* Add Url Window */

deluge/ui/web/gettext.js

@@ -22,7 +22,7 @@ GetText = {
     }
 }
 
-function _(string) {
+window._ = function(string) {
     return GetText.get(string);
 }
 

deluge/ui/web/js/deluge-all/ConnectionManager.js

@@ -46,8 +46,8 @@ Ext.define('Deluge.ConnectionManager', {
 
     initComponent: function() {
         this.callParent(arguments);
-        this.afterMethod('onHide', this.afterHide, this);
+        this.afterMethod('onHide', this.afterHidden, this);
-        this.afterMethod('onShow', this.afterShow, this);
+        this.afterMethod('onShow', this.afterShown, this);
 
         deluge.events.on('login', this.onLogin, this);
         deluge.events.on('logout', this.onLogout, this);
@@ -66,7 +66,7 @@ Ext.define('Deluge.ConnectionManager', {
         this.grid = this.add({
             xtype: 'grid',
             autoScroll: true,
-            store: new Ext.data.Store({
+            store: Ext.create('Ext.data.Store', {
                 model: 'Deluge.data.Host',
                 proxy: {
                     type: 'memory',
@@ -107,7 +107,7 @@ Ext.define('Deluge.ConnectionManager', {
             ]
         });
 
-        this.update = this.update.bind(this);
+        this.update = Ext.Function.bind(this.update, this);
     },
 
     /**
@@ -189,7 +189,7 @@ Ext.define('Deluge.ConnectionManager', {
     // private
     onAddClick: function(button, e) {
         if (!this.addWindow) {
-            this.addWindow = new Deluge.AddConnectionWindow();
+            this.addWindow = Ext.create('Deluge.AddConnectionWindow');
             this.addWindow.on('hostadded', this.onHostAdded, this);
         }
         this.addWindow.show();
@@ -261,7 +261,7 @@ Ext.define('Deluge.ConnectionManager', {
     },
 
     // private
-    afterHide: function() {
+    afterHidden: function() {
         if (this.running) window.clearInterval(this.running);
     },
 
@@ -333,7 +333,7 @@ Ext.define('Deluge.ConnectionManager', {
 
     // FIXME: Find out why this is being fired twice
     // private
-    afterShow: function() {
+    afterShown: function() {
         if (!this.addHostButton) {
             var buttons = this.grid.query('button');
             this.addHostButton = buttons[0];

deluge/ui/web/js/deluge-all/EditTrackersWindow.js

@@ -29,7 +29,6 @@
  * 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.EditTrackerWindow
@@ -64,8 +63,8 @@ Ext.define('Deluge.EditTrackersWindow', {
         this.addWindow.on('add', this.onAddTrackers, this);
         this.editWindow = Ext.create('Deluge.EditTrackerWindow');
 
-        this.list = new Ext.list.ListView({
+        this.list = Ext.create('Ext.list.ListView', {
-            store: new Ext.data.JsonStore({
+            store: Ext.create('Ext.data.Store', {
                 root: 'trackers',
                 fields: [
                     'tier',
@@ -96,7 +95,7 @@ Ext.define('Deluge.EditTrackersWindow', {
             margins: '0 0 0 0',
             items: [this.list],
             autoScroll: true,
-            bbar: new Ext.Toolbar({
+            bbar: {
                 items: [
                     {
                         text: _('Up'),
@@ -125,7 +124,7 @@ Ext.define('Deluge.EditTrackersWindow', {
                         scope: this
                     }
                 ]
-            })
+            }
         });
     },
 
@@ -147,7 +146,7 @@ Ext.define('Deluge.EditTrackersWindow', {
                 }
             }, this);
             if (duplicate) return;
-            store.add(new store.recordType({'tier': heightestTier + 1, 'url': tracker}));
+            store.add({'tier': heightestTier + 1, 'url': tracker});
         }, this);
     },
 

deluge/ui/web/js/deluge-all/FilterPanel.js

@@ -46,6 +46,18 @@ Ext.define('Deluge.FilterPanel', {
         this.callParent(arguments);
         this.filterType = this.initialConfig.filter;
 
+        this.on('activate', function() {
+            console.log('activate');
+        });
+
+        this.on('show', function() {
+            console.log('show');
+        });
+
+        this.on('render', function() {
+            console.log('render');
+        });
+
         var title = this.filterType.replace('_', ' '),
             parts = title.split(' '),
             title = '';
@@ -74,7 +86,7 @@ Ext.define('Deluge.FilterPanel', {
                 }
             }),
             columns: [{
-                id: 'filter',
+                xtype: 'templatecolumn',
                 sortable: false,
                 tpl: tpl,
                 dataIndex: 'filter',
@@ -173,7 +185,6 @@ Ext.define('Deluge.FilterPanel', {
             //sm.select(0);
         }
     }
-
 });
 
 Deluge.FilterPanel.templates = {

deluge/ui/web/js/deluge-all/Formatters.js

@@ -148,9 +148,9 @@ Deluge.Formatters = {
         return value.toLowerCase().replace('.', '_');
     }
 }
-var fsize = Deluge.Formatters.size;
+window.fsize = Deluge.Formatters.size;
-var fspeed = Deluge.Formatters.speed;
+window.fspeed = Deluge.Formatters.speed;
-var ftime = Deluge.Formatters.timeRemaining;
+window.ftime = Deluge.Formatters.timeRemaining;
-var fdate = Deluge.Formatters.date;
+window.fdate = Deluge.Formatters.date;
-var fplain = Deluge.Formatters.plain;
+window.fplain = Deluge.Formatters.plain;
 Ext.util.Format.cssClassEscape = Deluge.Formatters.cssClassEscape;

deluge/ui/web/js/deluge-all/Menus.js

@@ -1,6 +1,6 @@
 /*!
  * Deluge.Menus.js
- * 
+ *
  * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -34,7 +34,7 @@ deluge.menus = {
     onTorrentAction: function(item, e) {
         var ids = deluge.torrents.getSelectedIds();
         var action = item.initialConfig.torrentAction;
-        
+
         switch (action) {
             case 'pause':
             case 'resume':
@@ -69,7 +69,7 @@ deluge.menus = {
                 break;
             case 'recheck':
                 deluge.client.core.force_recheck(ids, {
-                    success: function() {    
+                    success: function() {
                         deluge.ui.update();
                     }
                 });
@@ -81,7 +81,7 @@ deluge.menus = {
     }
 }
 
-deluge.menus.torrent = new Ext.menu.Menu({
+deluge.menus.torrent = Ext.create('Ext.menu.Menu', {
     id: 'torrentMenu',
     items: [{
         torrentAction: 'pause',
@@ -98,11 +98,11 @@ deluge.menus.torrent = new Ext.menu.Menu({
     }, '-', {
         text: _('Options'),
         iconCls: 'icon-options',
-        menu: new Ext.menu.Menu({
+        menu: {
             items: [{
                 text: _('D/L Speed Limit'),
                 iconCls: 'x-deluge-downloading',
-                menu: new Ext.menu.Menu({
+                menu: {
                     items: [{
                         text: _('5 KiB/s')
                     }, {
@@ -116,11 +116,11 @@ deluge.menus.torrent = new Ext.menu.Menu({
                     },{
                         text: _('Unlimited')
                     }]
-                })
+                }
             }, {
                 text: _('U/L Speed Limit'),
                 iconCls: 'x-deluge-seeding',
-                menu: new Ext.menu.Menu({
+                menu: {
                     items: [{
                         text: _('5 KiB/s')
                     }, {
@@ -134,11 +134,11 @@ deluge.menus.torrent = new Ext.menu.Menu({
                     },{
                         text: _('Unlimited')
                     }]
-                })
+                }
             }, {
                 text: _('Connection Limit'),
                 iconCls: 'x-deluge-connections',
-                menu: new Ext.menu.Menu({
+                menu: {
                     items: [{
                         text: _('50')
                     }, {
@@ -152,11 +152,11 @@ deluge.menus.torrent = new Ext.menu.Menu({
                     },{
                         text: _('Unlimited')
                     }]
-                })
+                }
             }, {
                 text: _('Upload Slot Limit'),
                 iconCls: 'icon-upload-slots',
-                menu: new Ext.menu.Menu({
+                menu: {
                     items: [{
                         text: _('0')
                     }, {
@@ -170,17 +170,17 @@ deluge.menus.torrent = new Ext.menu.Menu({
                     },{
                         text: _('Unlimited')
                     }]
-                })
+                }
             }, {
                 id: 'auto_managed',
                 text: _('Auto Managed'),
                 checked: false
             }]
-        })
+        }
     }, '-', {
         text: _('Queue'),
         iconCls: 'icon-queue',
-        menu: new Ext.menu.Menu({
+        menu: {
             items: [{
                 torrentAction: 'top',
                 text: _('Top'),
@@ -206,7 +206,7 @@ deluge.menus.torrent = new Ext.menu.Menu({
                 handler: deluge.menus.onTorrentAction,
                 scope: deluge.menus
             }]
-        })
+        }
     }, '-', {
         torrentAction: 'update',
         text: _('Update Tracker'),
@@ -240,7 +240,7 @@ deluge.menus.torrent = new Ext.menu.Menu({
     }]
 });
 
-deluge.menus.filePriorities = new Ext.menu.Menu({
+deluge.menus.filePriorities = Ext.create('Ext.menu.Menu', {
     id: 'filePrioritiesMenu',
     items: [{
         id: 'expandAll',

deluge/ui/web/js/deluge-all/MoveStorage.js

@@ -97,4 +97,3 @@ Ext.define('Deluge.MoveStorage', {
         this.hide();
     }
 });
-deluge.moveStorage = new Deluge.MoveStorage();

deluge/ui/web/js/deluge-all/RemoveWindow.js

@@ -46,17 +46,25 @@ Ext.define('Deluge.RemoveWindow', {
     closeAction: 'hide',
     closable:    true,
     iconCls:     'x-deluge-remove-window-icon',
-    plain:       true,
-
-    bodyStyle: 'padding: 5px; padding-left: 10px;',
-    html: 'Are you sure you wish to remove the torrent (s)?',
 
     initComponent: function() {
         this.callParent(arguments);
-        // FIXME: Replace with docked toolbar
+        this.addDocked({
-        //this.addButton(_('Cancel'), this.onCancel, this);
+            xtype: 'toolbar',
-        //this.addButton(_('Remove With Data'), this.onRemoveData, this);
+            dock: 'bottom',
-        //this.addButton(_('Remove Torrent'), this.onRemove, this);
+            defaultType: 'button',
+            items: [
+                '->',
+                {text: _('Cancel'), handler: this.onCancel, scope: this},
+                {text: _('Remove With Data'), handler: this.onRemoveData, scope: this},
+                {text: _('Remove Torrent'), handler: this.onRemove, scope: this}
+            ]
+        });
+        this.add({
+            bodyStyle: 'padding: 10px;',
+            border: false,
+            html: 'Are you sure you wish to remove the torrent (s)?',
+        });
     },
 
     remove: function(removeData) {
@@ -96,5 +104,3 @@ Ext.define('Deluge.RemoveWindow', {
         deluge.ui.update();
     }
 });
-
-deluge.removeWindow = new Deluge.RemoveWindow();

deluge/ui/web/js/deluge-all/Sidebar.js

@@ -71,7 +71,7 @@ Ext.define('Deluge.Sidebar', {
     },
 
     createFilter: function(filter, states) {
-        var panel = new Deluge.FilterPanel({
+        var panel = Ext.create('Deluge.FilterPanel', {
             filter: filter
         });
         panel.on('selectionchange', function(view, nodes) {
@@ -89,6 +89,11 @@ Ext.define('Deluge.Sidebar', {
             if (!deluge.config.sidebar_multiple_filters) {
                 deluge.ui.update();
             }
+
+            Ext.defer(function() {
+                panel.doLayout();
+            }, 100);
+            console.log('switching');
             //if (!sm.hasSelection() && s.count() > 0) {
             //    sm.select([s.first()]);
             //}

deluge/ui/web/js/deluge-all/Statusbar.js

@@ -51,7 +51,7 @@ Ext.define('Deluge.StatusBar', {
             cls: 'x-btn-text-icon',
             iconCls: 'x-deluge-connections',
             tooltip: _('Connections'),
-            menu: new Deluge.StatusbarMenu({
+            menu: Ext.create('Deluge.StatusbarMenu', {
                 items: [{
                     text: '50',
                     value: '50',
@@ -98,7 +98,7 @@ Ext.define('Deluge.StatusBar', {
             cls: 'x-btn-text-icon',
             iconCls: 'x-deluge-downloading',
             tooltip: _('Download Speed'),
-            menu: new Deluge.StatusbarMenu({
+            menu: Ext.create('Deluge.StatusbarMenu', {
                 items: [{
                     value: '5',
                     text: '5 KiB/s',
@@ -146,7 +146,7 @@ Ext.define('Deluge.StatusBar', {
             cls: 'x-btn-text-icon',
             iconCls: 'x-deluge-seeding',
             tooltip: _('Upload Speed'),
-            menu: new Deluge.StatusbarMenu({
+            menu: Ext.create('Deluge.StatusbarMenu', {
                 items: [{
                     value: '5',
                     text: '5 KiB/s',

deluge/ui/web/js/deluge-all/StatusbarMenu.js

@@ -1,6 +1,6 @@
 /*!
  * Deluge.StatusbarMenu.js
- * 
+ *
  * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -37,10 +37,10 @@ Ext.ns('Deluge');
  * @extends Ext.menu.Menu
  */
 Deluge.StatusbarMenu = Ext.extend(Ext.menu.Menu, {
-    
+
     initComponent: function() {
         Deluge.StatusbarMenu.superclass.initComponent.call(this);
-        this.otherWin = new Deluge.OtherLimitWindow(this.initialConfig.otherWin || {});
+        this.otherWin = Ext.create('Deluge.OtherLimitWindow', this.initialConfig.otherWin || {});
 
         this.items.each(function(item) {
             if (item.getXType() != 'menucheckitem') return;
@@ -51,7 +51,7 @@ Deluge.StatusbarMenu = Ext.extend(Ext.menu.Menu, {
             }
         }, this);
     },
-    
+
     setValue: function(value) {
         var beenSet = false;
         // set the new value
@@ -67,12 +67,12 @@ Deluge.StatusbarMenu = Ext.extend(Ext.menu.Menu, {
                     beenSet = true;
                 } else {
                     item.setChecked(false);
-                }   
+                }
                 item.resumeEvents();
-            }   
+            }
 
             if (item.value == 'other') other = item;
-        }); 
+        });
 
         if (beenSet) return;
 

deluge/ui/web/js/deluge-all/TorrentGrid.js

@@ -42,7 +42,7 @@ function torrentSpeedRenderer(value) {
     return fspeed(value);
 }
 function torrentProgressRenderer(value, md, r) {
-    value = new Number(value);
+    value = Number(value);
     var width = this.query('gridcolumn[dataIndex=progress]')[0].getWidth(),
         progress = value,
         text = r.data['state'] + ' ' + value.toFixed(2) + '%';
@@ -63,7 +63,7 @@ function peersRenderer(value, p, r) {
     }
 }
 function availRenderer(value, p, r)    {
-    return (value < 0) ? '&infin;' : new Number(value).toFixed(3);
+    return (value < 0) ? '&infin;' : Number(value).toFixed(3);
 }
 function trackerRenderer(value, p, r) {
     return Ext.String.format('<div style="background: url(' + deluge.config.base + 'tracker/{0}) no-repeat; padding-left: 20px;">{0}</div>', value);
@@ -95,14 +95,13 @@ Ext.define('Deluge.TorrentGrid', {
     torrents: {},
 
     columns: [{
-        id:'queue',
         header: _('#'),
         width: 30,
         sortable: true,
         renderer: queueRenderer,
         dataIndex: 'queue'
     }, {
-        id:'name',
+        flex: 1,
         header: _('Name'),
         width: 150,
         sortable: true,
@@ -245,11 +244,10 @@ Ext.define('Deluge.TorrentGrid', {
     region: 'center',
     cls: 'deluge-torrents',
     stripeRows: true,
-    autoExpandColumn: 'name',
-    deferredRender:false,
     autoScroll:true,
+    deferredRender:false,
+    invalidateScrollOnRefresh: false,
     margins: '5 5 0 0',
-    stateful: true,
 
     initComponent: function() {
         this.callParent(arguments);
@@ -328,8 +326,9 @@ Ext.define('Deluge.TorrentGrid', {
                     }
                 }
                 record.endEdit();
+                record.commit();
             } else {
-                var record = new Deluge.data.Torrent(torrent);
+                var record = Ext.create('Deluge.data.Torrent', torrent);
                 record.setId(t);
                 this.torrents[t] = 1;
                 newTorrents.push(record);

deluge/ui/web/js/deluge-all/UI.js

@@ -55,12 +55,13 @@ deluge.ui = {
         deluge.editTrackers = Ext.create('Deluge.EditTrackersWindow');
         deluge.login = Ext.create('Deluge.LoginWindow');
         deluge.preferences = Ext.create('Deluge.preferences.PreferencesWindow');
+        deluge.removeWindow = Ext.create('Deluge.RemoveWindow');
         deluge.sidebar = Ext.create('Deluge.Sidebar');
         deluge.statusbar = Ext.create('Deluge.StatusBar');
         deluge.toolbar = Ext.create('Deluge.Toolbar');
         deluge.torrents = Ext.create('Deluge.TorrentGrid');
 
-        this.MainPanel = new Ext.Panel({
+        this.MainPanel = Ext.create('Ext.Panel', {
             id: 'mainPanel',
             iconCls: 'x-deluge-main-panel',
             title: 'Deluge',
@@ -74,7 +75,7 @@ deluge.ui = {
             bbar: deluge.statusbar
         });
 
-        this.Viewport = new Ext.Viewport({
+        this.Viewport = Ext.create('Ext.Viewport', {
             layout: 'fit',
             items: [this.MainPanel]
         });
@@ -83,7 +84,7 @@ deluge.ui = {
         deluge.events.on("disconnect", this.onDisconnect, this);
         deluge.events.on('PluginDisabledEvent', this.onPluginDisabled, this);
         deluge.events.on('PluginEnabledEvent', this.onPluginEnabled, this);
-        deluge.client = new Ext.ux.util.RpcClient({
+        deluge.client = Ext.create('Ext.ux.util.RpcClient', {
             url: deluge.config.base + 'json'
         });
 

deluge/ui/web/js/deluge-all/add/AddWindow.js

@@ -46,51 +46,67 @@ Ext.define('Deluge.add.AddWindow', {
 
     initComponent: function() {
         this.callParent(arguments);
-        // FIXME: replace with docked toolbar
+        this.afterMethod('onHide', this.afterHidden, this);
-        //this.addButton(_('Cancel'), this.onCancelClick, this);
+        this.afterMethod('onShow', this.afterShown, this);
-        //this.addButton(_('Add'), this.onAddClick, this);
+
+        this.addDocked({
+            xtype: 'toolbar',
+            dock: 'bottom',
+            defaultType: 'button',
+            items: [
+                '->',
+                {text: _('Cancel'), handler: this.onCancelClick, scope: this},
+                {text: _('Add'), handler: this.onAddClick, scope: this}
+            ]
+        });
 
         function torrentRenderer(value, p, r) {
             if (r.data['info_hash']) {
-                return String.format('<div class="x-deluge-add-torrent-name">{0}</div>', value);
+                return Ext.String.format('<div class="x-deluge-add-torrent-name">{0}</div>', value);
             } else {
-                return String.format('<div class="x-deluge-add-torrent-name-loading">{0}</div>', value);
+                return Ext.String.format('<div class="x-deluge-add-torrent-name-loading">{0}</div>', value);
             }
         }
 
-        this.list = new Ext.list.ListView({
+        this.grid = this.add({
-            store: new Ext.data.SimpleStore({
+            xtype: 'grid',
-                fields: [
+            autoScroll: true,
-                    {name: 'info_hash', mapping: 1},
+            store: Ext.create('Ext.data.Store', {
-                    {name: 'text', mapping: 2}
+                model: 'Deluge.data.AddTorrent'
-                ],
-                id: 0
             }),
             columns: [{
                 id: 'torrent',
                 width: 150,
                 sortable: true,
                 renderer: torrentRenderer,
-                dataIndex: 'text'
+                dataIndex: 'text',
+                flex: 1
             }],
-            stripeRows: true,
+            hideHeaders: true,
+            margins: '5 5 5 5',
+            region: 'center',
             singleSelect: true,
             listeners: {
                 'selectionchange': {
                     fn: this.onSelect,
                     scope: this
+                },
+                'render': {
+                    fn: function(list) {
+                        var el = list.getEl(),
+                            dh = Ext.core.DomHelper,
+                            dropEl = {
+                                tag: 'div',
+                                cls: 'x-deluge-dropzone',
+                                style: 'display: none',
+                                html: 'Drop torrent file here'
+                            };
+                        this.dropEl = Ext.get(dh.insertFirst(el, dropEl));
+                    },
+                    scope: this
                 }
             },
-            hideHeaders: true,
+            bbar: {
-            autoExpandColumn: 'torrent',
-            autoScroll: true
-        });
-
-        this.add({
-            region: 'center',
-            items: [this.list],
-            margins: '5 5 5 5',
-            bbar: new Ext.Toolbar({
                 items: [{
                     iconCls: 'x-deluge-add-file',
                     text: _('File'),
@@ -111,23 +127,25 @@ Ext.define('Deluge.add.AddWindow', {
                     handler: this.onRemove,
                     scope: this
                 }]
-            })
+            }
         });
 
-        this.optionsPanel = this.add(new Deluge.add.OptionsPanel());
+        this.optionsPanel = this.add(Ext.create('Deluge.add.OptionsPanel'));
-        this.on('hide', this.onHide, this);
-        this.on('show', this.onShow, this);
     },
 
     clear: function() {
-        this.list.getStore().removeAll();
+        this.grid.getStore().removeAll();
         this.optionsPanel.clear();
     },
 
+    processDnDFileUpload: function(file) {
+        console.log(file.size);
+    },
+
     onAddClick: function() {
         var torrents = [];
-        if (!this.list) return;
+        if (!this.grid) return;
-        this.list.getStore().each(function(r) {
+        this.grid.getStore().each(function(r) {
             var id = r.get('info_hash');
             torrents.push({
                 path: this.optionsPanel.getFilename(id),
@@ -149,28 +167,22 @@ Ext.define('Deluge.add.AddWindow', {
     },
 
     onFile: function() {
-        if (!this.file) this.file = new Deluge.add.FileWindow();
+        if (!this.file) this.file = Ext.create('Deluge.add.FileWindow');
         this.file.show();
     },
 
-    onHide: function() {
-        this.optionsPanel.setActiveTab(0);
-        this.optionsPanel.files.setDisabled(true);
-        this.optionsPanel.form.setDisabled(true);
-    },
-
     onRemove: function() {
         if (!this.list.getSelectionCount()) return;
-        var torrent = this.list.getSelectedRecords()[0];
+        var torrent = this.grid.getSelectedRecords()[0];
-        this.list.getStore().remove(torrent);
+        this.grid.getStore().remove(torrent);
         this.optionsPanel.clear();
 
         if (this.torrents && this.torrents[torrent.id]) delete this.torrents[torrent.id];
     },
 
-    onSelect: function(list, selections) {
+    onSelect: function(grid, selections) {
         if (selections.length) {
-            var record = this.list.getRecord(selections[0]);
+            var record = selections[0];
             this.optionsPanel.setTorrent(record.get('info_hash'));
             this.optionsPanel.files.setDisabled(false);
             this.optionsPanel.form.setDisabled(false);
@@ -180,29 +192,95 @@ Ext.define('Deluge.add.AddWindow', {
         }
     },
 
-    onShow: function() {
+    afterHidden: function() {
+        this.optionsPanel.setActiveTab(0);
+        this.optionsPanel.files.setDisabled(true);
+        this.optionsPanel.form.setDisabled(true);
+    },
+
+    afterShown: function() {
         if (!this.url) {
-            this.url = new Deluge.add.UrlWindow();
+            this.url = Ext.create('Deluge.add.UrlWindow');
             this.url.on('beforeadd', this.onTorrentBeforeAdd, this);
             this.url.on('add', this.onTorrentAdd, this);
         }
 
         if (!this.file) {
-            this.file = new Deluge.add.FileWindow();
+            this.file = Ext.create('Deluge.add.FileWindow');
             this.file.on('beforeadd', this.onTorrentBeforeAdd, this);
             this.file.on('add', this.onTorrentAdd, this);
         }
 
         this.optionsPanel.form.getDefaults();
+
+        var body = Ext.getBody(),
+            dropEl = this.dropEl;
+
+        body.on({
+            dragenter: function(evt) {
+                dropEl.setStyle('display', 'block');
+                return true;
+            },
+            dragleave: function(evt) {
+                var viewSize = body.getViewSize(),
+                    pageX = evt.getPageX(),
+                    pageY = evt.getPageY();
+                if (pageX < 10 || pageY < 10 || viewSize.width - pageX < 10  || viewSize.height - pageY < 10) {
+                    dropEl.setStyle('display', 'none');
+                }
+                return true;
+            },
+            dragover: function(evt) {
+                evt.stopEvent();
+                return true;
+            },
+            drop: function(evt) {
+                evt.stopEvent();
+                return true;
+            }
+        });
+
+        this.dropEl.on({
+            dragenter: function(evt) {
+                evt.browserEvent.dataTransfer.dropEffect = 'move';
+                return true;
+            },
+            dragover: function(evt) {
+                evt.browserEvent.dataTransfer.dropEffect = 'move';
+                evt.stopEvent();
+                return true;
+            },
+            drop: {
+                fn: function(evt) {
+                    evt.stopEvent();
+                    var files = evt.browserEvent.dataTransfer.files;
+
+                    if (files === undefined) {
+                        return true;
+                    }
+                    var len = files.length;
+                    while (--len >= 0) {
+                        this.processDnDFileUpload(files[len]);
+                    }
+                    this.dropEl.setStyle('display', 'none');
+                },
+                scope: this
+            }
+        });
     },
 
     onTorrentBeforeAdd: function(torrentId, text) {
-        var store = this.list.getStore();
+        var rec = Ext.create('Deluge.data.AddTorrent', {
-        store.loadData([[torrentId, null, text]], true);
+            'id':        torrentId,
+            'info_hash': null,
+            'text':      text
+
+        }, torrentId);
+        this.grid.getStore().add(rec);
     },
 
     onTorrentAdd: function(torrentId, info) {
-        var r = this.list.getStore().getById(torrentId);
+        var r = this.grid.getStore().getById(String(torrentId));
         if (!info) {
             Ext.MessageBox.show({
                 title: _('Error'),
@@ -212,11 +290,11 @@ Ext.define('Deluge.add.AddWindow', {
                 icon: Ext.MessageBox.ERROR,
                 iconCls: 'x-deluge-icon-error'
             });
-            this.list.getStore().remove(r);
+            this.grid.getStore().remove(r);
         } else {
             r.set('info_hash', info['info_hash']);
             r.set('text', info['name']);
-            this.list.getStore().commitChanges();
+            r.commit();;
             this.optionsPanel.addTorrent(info);
         }
     },

deluge/ui/web/js/deluge-all/add/FileWindow.js

@@ -50,24 +50,31 @@ Ext.define('Deluge.add.FileWindow', {
 
     initComponent: function() {
         this.callParent(arguments);
-        this.addButton(_('Add'), this.onAddClick, this);
+        this.addDocked({
+            xtype: 'toolbar',
+            dock: 'bottom',
+            defaultType: 'button',
+            items: [
+                '->',
+                {text: _('Add'), handler: this.onAddClick, scope: this}
+            ]
+        });
 
         this.form = this.add({
             xtype: 'form',
+            width: 300,
             baseCls: 'x-plain',
-            labelWidth: 35,
             autoHeight: true,
-            fileUpload: true,
+
             items: [{
-                xtype: 'fileuploadfield',
+                xtype: 'filefield',
                 id: 'torrentFile',
-                width: 280,
+                anchor: '100%',
                 emptyText: _('Select a torrent'),
+                labelWidth: 35,
                 fieldLabel: _('File'),
                 name: 'file',
-                buttonCfg: {
+                buttonText: _('Browse') + '...'
-                    text: _('Browse') + '...'
-                }
             }]
         });
     },

deluge/ui/web/js/deluge-all/add/FilesTab.js

@@ -47,41 +47,46 @@ Ext.define('Deluge.add.FilesTab', {
     rootVisible: false,
 
     columns: [{
+        xtype: 'treecolumn',
         header: _('Filename'),
         width: 295,
         dataIndex: 'filename'
     },{
+        xtype: 'templatecolumn',
         header: _('Size'),
         width: 60,
         dataIndex: 'size',
-        tpl: new Ext.XTemplate('{size:this.fsize}', {
+        tpl: Ext.create('Ext.XTemplate', '{size:this.fsize}', {
             fsize: function(v) {
                 return fsize(v);
             }
         })
     },{
+        xtype: 'templatecolumn',
         header: _('Download'),
         width: 65,
         dataIndex: 'download',
-        tpl: new Ext.XTemplate('{download:this.format}', {
+        tpl: Ext.create('Ext.XTemplate', '{download:this.format}', {
             format: function(v) {
                 return '<div rel="chkbox" class="x-grid3-check-col'+(v?'-on':'')+'"> </div>';
             }
         })
     }],
 
+    store: Ext.create('Ext.data.TreeStore', {
+        model: 'Deluge.data.AddTorrentFile',
+        proxy: {
+            type: 'memory'
+        }
+    }),
+
     initComponent: function() {
         this.callParent(arguments);
         this.on('click', this.onNodeClick, this);
     },
 
     clearFiles: function() {
-        var root = this.getRootNode();
+        this.getStore().removeAll();
-        if (!root.hasChildNodes()) return;
-        root.cascade(function(node) {
-            if (!node.parentNode || !node.getOwnerTree()) return;
-            node.remove();
-        });
     },
 
     setDownload: function(node, value, suppress) {
@@ -106,7 +111,7 @@ Ext.define('Deluge.add.FilesTab', {
     },
 
     onNodeClick: function(node, e) {
-        var el = new Ext.Element(e.target);
+        var el = Ext.fly(e.target);
         if (el.getAttribute('rel') == 'chkbox') {
             this.setDownload(node, !node.attributes.download);
         }

deluge/ui/web/js/deluge-all/add/OptionsPanel.js

@@ -43,8 +43,8 @@ Ext.define('Deluge.add.OptionsPanel', {
 
     initComponent: function() {
         this.callParent(arguments);
-        this.files = this.add(new Deluge.add.FilesTab());
+        this.files = this.add(Ext.create('Deluge.add.FilesTab'));
-        this.form = this.add(new Deluge.add.OptionsTab());
+        this.form = this.add(Ext.create('Deluge.add.OptionsTab'));
 
         this.files.on('fileschecked', this.onFilesChecked, this);
     },

deluge/ui/web/js/deluge-all/add/UrlWindow.js

@@ -38,7 +38,7 @@ Ext.define('Deluge.add.UrlWindow', {
     plain: true,
     layout: 'fit',
     width: 350,
-    height: 155,
+    height: 130,
 
     buttonAlign: 'center',
     closeAction: 'hide',
@@ -47,28 +47,38 @@ Ext.define('Deluge.add.UrlWindow', {
 
     initComponent: function() {
         this.callParent(arguments);
-        this.addButton(_('Add'), this.onAddClick, this);
+
+        this.addDocked({
+            xtype: 'toolbar',
+            dock: 'bottom',
+            defaultType: 'button',
+            items: [
+                '->',
+                {text: _('Add'), handler: this.onAddClick, scope: this}
+            ]
+        });
 
         var form = this.add({
             xtype: 'form',
             defaultType: 'textfield',
             baseCls: 'x-plain',
-            labelWidth: 55
+            defaults: {
+                labelWidth: 55,
+                anchor: '100%'
+            }
         });
 
         this.urlField = form.add({
             fieldLabel: _('Url'),
             id: 'url',
-            name: 'url',
+            name: 'url'
-            width: '97%'
         });
         this.urlField.on('specialkey', this.onAdd, this);
 
         this.cookieField = form.add({
             fieldLabel: _('Cookies'),
             id: 'cookies',
-            name: 'cookies',
+            name: 'cookies'
-            width: '97%'
         });
         this.cookieField.on('specialkey', this.onAdd, this);
     },

deluge/ui/web/js/deluge-all/data/AddTorrent.js

@@ -0,0 +1,40 @@
+/*!
+ * Deluge.data.AddTorrent.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.
+ */
+
+Ext.define('Deluge.data.AddTorrent', {
+    extend: 'Ext.data.Model',
+    fields: [
+        {name: 'id',        type: 'string'},
+        {name: 'info_hash', type: 'string'},
+        {name: 'text',      type: 'string'}
+    ]
+});

deluge/ui/web/js/deluge-all/data/AddTorrentFile.js

@@ -0,0 +1,40 @@
+/*!
+ * Deluge.data.AddTorrentFile.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.
+ */
+
+Ext.define('Deluge.data.AddTorrentFile', {
+    extend: 'Ext.data.Model',
+    fields: [
+        {name: 'filename', type: 'string'},
+        {name: 'size',     type: 'number'},
+        {name: 'download', type: 'boolean'}
+    ]
+});

deluge/ui/web/js/deluge-all/data/Plugin.js

@@ -1,5 +1,5 @@
 /*!
- * Deluge.data.PluginRecord.js
+ * Deluge.data.Plugin.js
  *
  * Copyright (c) Damien Churchill 2011 <damoxc@gmail.com>
  *

deluge/ui/web/js/deluge-all/data/Preferences.js

@@ -0,0 +1,38 @@
+/*!
+ * Deluge.data.Preference.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.
+ */
+
+Ext.define('Deluge.data.Preferences', {
+    extend: 'Ext.data.Model',
+    fields: [
+        {name: 'name', type: 'string'}
+    ]
+});

deluge/ui/web/js/deluge-all/details/DetailsTab.js

@@ -104,7 +104,8 @@ Ext.define('Deluge.details.DetailsTab', {
         };
 
         for (var field in this.fields) {
-            if (!Ext.isDefined(data[field])) continue; // this is a field we aren't responsible for.
+            // this is a field we aren't responsible for.
+            if (!Ext.isDefined(data[field])) continue;
             if (data[field] == this.oldData[field]) continue;
             this.fields[field].dom.innerHTML = Ext.escapeHTML(data[field]);
         }

deluge/ui/web/js/deluge-all/details/FilesTab.js

@@ -45,22 +45,22 @@ Ext.define('Deluge.details.FilesTab', {
 
     title: _('Files'),
 
-    autoScroll: true,
-    rootVisible: false,
-
     columns: [{
-        header: _('Filename'),
+        xtype: 'treecolumn',
+        text: _('Filename'),
         width: 330,
         dataIndex: 'filename'
     }, {
-        header: _('Size'),
+        xtype: 'templatecolumn',
+        text: _('Size'),
         width: 150,
         dataIndex: 'size',
         tpl: Ext.create('Ext.XTemplate', '{size:this.fsize}', {
             fsize: function(v) { return fsize(v); }
         })
     }, {
-        header: _('Progress'),
+        xtype: 'templatecolumn',
+        text: _('Progress'),
         width: 150,
         dataIndex: 'progress',
         tpl: Ext.create('Ext.XTemplate', '{progress:this.progress}', {
@@ -70,10 +70,11 @@ Ext.define('Deluge.details.FilesTab', {
             }
         })
     }, {
-        header: _('Priority'),
+        xtype: 'templatecolumn',
+        text: _('Priority'),
         width: 150,
         dataIndex: 'priority',
-        tpl: new Ext.XTemplate('<tpl if="!isNaN(priority)">' +
+        tpl: Ext.create('Ext.XTemplate', '<tpl if="!isNaN(priority)">' +
             '<div class="{priority:this.getClass}">' +
                 '{priority:this.getName}' +
             '</div></tpl>', {
@@ -87,88 +88,45 @@ Ext.define('Deluge.details.FilesTab', {
         })
     }],
 
+    store: Ext.create('Ext.data.TreeStore', {
+        model: 'Deluge.data.File',
+        proxy: {
+            type: 'memory'
+        }
+    }),
+
+    autoScroll: true,
     multiSelect: true,
+    rootVisible: false,
+    useArrows: true,
 
     clear: function() {
-        var root = this.getRootNode();
+        this.getStore().removeAll();
-        if (!root.hasChildNodes()) return;
-        root.cascade(function(node) {
-            var parentNode = node.parentNode;
-            if (!parentNode) return;
-            if (!parentNode.ownerTree) return;
-            parentNode.removeChild(node);
-        });
-    },
-
-    createFileTree: function(files) {
-        function walk(files, parentNode) {
-            for (var file in files.contents) {
-                var item = files.contents[file];
-                if (item.type == 'dir') {
-                    walk(item, parentNode.appendChild(new Ext.tree.TreeNode({
-                        text: file,
-                        filename: file,
-                        size: item.size,
-                        progress: item.progress,
-                        priority: item.priority
-                    })));
-                } else {
-                    parentNode.appendChild(new Ext.tree.TreeNode({
-                        text: file,
-                        filename: file,
-                        fileIndex: item.index,
-                        size: item.size,
-                        progress: item.progress,
-                        priority: item.priority,
-                        leaf: true,
-                        iconCls: 'x-deluge-file',
-                        uiProvider: Ext.ux.tree.TreeGridNodeUI
-                    }));
-                }
-            }
-        }
-        var root = this.getRootNode();
-        walk(files, root);
-        root.firstChild.expand();
     },
 
     update: function(torrentId) {
+        var store = this.getStore(),
+            view  = this.getView();
+
         if (this.torrentId != torrentId) {
-            this.clear();
+            //store.removeAll();
+            store.setProxy({
+                type: 'ajax',
+                url:  'files/' + torrentId
+            })
             this.torrentId = torrentId;
         }
 
-        deluge.client.web.get_torrent_files(torrentId, {
+        store.load();
-            success: this.onRequestComplete,
-            scope: this,
-            torrentId: torrentId
-        });
-    },
-
-    updateFileTree: function(files) {
-        function walk(files, parentNode) {
-            for (var file in files.contents) {
-                var item = files.contents[file];
-                var node = parentNode.findChild('filename', file);
-                node.attributes.size     = item.size;
-                node.attributes.progress = item.progress;
-                node.attributes.priority = item.priority;
-                node.ui.updateColumns();
-                if (item.type == 'dir') {
-                    walk(item, node);
-                }
-            }
-        }
-        walk(files, this.getRootNode());
     },
 
     onRender: function(ct, position) {
         Deluge.details.FilesTab.superclass.onRender.call(this, ct, position);
         deluge.menus.filePriorities.on('itemclick', this.onItemClick, this);
         this.on('contextmenu', this.onContextMenu, this);
-        this.sorter = new Ext.tree.TreeSorter(this, {
+        //this.sorter = new Ext.tree.TreeSorter(this, {
-            folderSort: true
+        //    folderSort: true
-        });
+        //});
     },
 
     onContextMenu: function(node, e) {
@@ -223,13 +181,5 @@ Ext.define('Deluge.details.FilesTab', {
                 });
                 break;
         }
-    },
-
-    onRequestComplete: function(files, options) {
-        if (!this.getRootNode().hasChildNodes()) {
-            this.createFileTree(files);
-        } else {
-            this.updateFileTree(files);
-        }
     }
 });

deluge/ui/web/js/deluge-all/details/OptionsTab.js

@@ -50,7 +50,7 @@ Ext.define('Deluge.details.OptionsTab', {
         this.callParent(arguments);
 
         this.fieldsets = {}, this.fields = {};
-        this.optionsManager = new Deluge.MultiOptionsManager({
+        this.optionsManager = Ext.create('Deluge.MultiOptionsManager', {
             options: {
                 'max_download_speed': -1,
                 'max_upload_speed': -1,

deluge/ui/web/js/deluge-all/details/StatusTab.js

@@ -40,27 +40,50 @@ Ext.define('Deluge.details.StatusTab', {
     title: _('Status'),
     autoScroll: true,
 
-    onRender: function(ct, position) {
+    initComponent: function() {
         this.callParent(arguments);
-
+        this.columns = [];
+        this.queuedItems = {};
         this.progressBar = this.add({
             xtype: 'progressbar',
-            cls: 'x-deluge-status-progressbar'
+            cls: 'x-deluge-torrent-progressbar'
         });
-
+        this.torrentPanel = this.add({
-        this.status = this.add({
+            xtype: 'panel'
-            cls: 'x-deluge-status',
-            id: 'deluge-details-status',
-
-            border: false,
-            width: 1000,
-            loader: {
-                url: deluge.config.base + 'render/tab_status.html',
-                loadMask: true,
-                success: this.onPanelUpdate,
-                scope: this
-            }
         });
+        this.body = this.torrentPanel.body;
+    },
+
+    addColumn: function() {
+        var i = this.columns.push(false);
+        if (this.rendered) {
+            this.doAddColumn();
+        }
+        return i;
+    },
+
+    addItem: function(id, label) {
+        if (!this.rendered) {
+            this.queuedItems[id] = label;
+        } else {
+            this.doAddItem(id, label);
+        }
+    },
+
+    update: function(torrentId) {
+        deluge.client.web.get_torrent_status(torrentId, Deluge.Keys.Status, {
+            success: this.onRequestComplete,
+            scope: this
+        });
+    },
+
+    doAddColumn: function() {
+        var dl = Ext.core.DomHelper.append(this.body, {tag: 'dl'}, true);
+        return this.columns.push(dl);
+    },
+
+    doAddItem: function(id, label) {
+        //Ext.core.DomHelper.append(this.dl,
     },
 
     clear: function() {
@@ -70,53 +93,46 @@ Ext.define('Deluge.details.StatusTab', {
         }
     },
 
-    update: function(torrentId) {
-        if (!this.fields) this.getFields();
-        deluge.client.web.get_torrent_status(torrentId, Deluge.Keys.Status, {
-            success: this.onRequestComplete,
-            scope: this
-        });
-    },
-
     onPanelUpdate: function(el, response) {
         this.fields = {};
-        Ext.each(Ext.query('dd', this.status.body.dom), function(field) {
+        Ext.each(Ext.query('dd', this.torrent.body.dom), function(field) {
             this.fields[field.className] = field;
         }, this);
     },
 
-    onRequestComplete: function(status) {
+    onRequestComplete: function(torrent) {
-        seeders = status.total_seeds > -1 ? status.num_seeds + ' (' + status.total_seeds + ')' : status.num_seeds;
+        var text = torrent.state + ' ' + torrent.progress.toFixed(2) + '%';
-        peers = status.total_peers > -1 ? status.num_peers + ' (' + status.total_peers + ')' : status.num_peers;
+        this.progressBar.updateProgress(torrent.progress / 100.0, text);
-        last_seen_complete = status.last_seen_complete > 0.0 ? fdate(status.last_seen_complete) : "Never";
+
+        seeders = torrent.total_seeds > -1 ? torrent.num_seeds + ' (' + torrent.total_seeds + ')' : torrent.num_seeds;
+        peers = torrent.total_peers > -1 ? torrent.num_peers + ' (' + torrent.total_peers + ')' : torrent.num_peers;
+        last_seen_complete = torrent.last_seen_complete > 0.0 ? fdate(torrent.last_seen_complete) : "Never";
         var data = {
-            downloaded: fsize(status.total_done, true),
+            downloaded: fsize(torrent.total_done, true),
-            uploaded: fsize(status.total_uploaded, true),
+            uploaded: fsize(torrent.total_uploaded, true),
-            share: (status.ratio == -1) ? '∞' : status.ratio.toFixed(3),
+            share: (torrent.ratio == -1) ? '∞' : torrent.ratio.toFixed(3),
-            announce: ftime(status.next_announce),
+            announce: ftime(torrent.next_announce),
-            tracker_status: status.tracker_status,
+            tracker_torrent: torrent.tracker_torrent,
-            downspeed: (status.download_payload_rate) ? fspeed(status.download_payload_rate) : '0.0 KiB/s',
+            downspeed: (torrent.download_payload_rate) ? fspeed(torrent.download_payload_rate) : '0.0 KiB/s',
-            upspeed: (status.upload_payload_rate) ? fspeed(status.upload_payload_rate) : '0.0 KiB/s',
+            upspeed: (torrent.upload_payload_rate) ? fspeed(torrent.upload_payload_rate) : '0.0 KiB/s',
-            eta: ftime(status.eta),
+            eta: ftime(torrent.eta),
-            pieces: status.num_pieces + ' (' + fsize(status.piece_length) + ')',
+            pieces: torrent.num_pieces + ' (' + fsize(torrent.piece_length) + ')',
             seeders: seeders,
             peers: peers,
-            avail: status.distributed_copies.toFixed(3),
+            avail: torrent.distributed_copies.toFixed(3),
-            active_time: ftime(status.active_time),
+            active_time: ftime(torrent.active_time),
-            seeding_time: ftime(status.seeding_time),
+            seeding_time: ftime(torrent.seeding_time),
-            seed_rank: status.seed_rank,
+            seed_rank: torrent.seed_rank,
-            time_added: fdate(status.time_added),
+            time_added: fdate(torrent.time_added),
             last_seen_complete: last_seen_complete
         }
-        data.auto_managed = _((status.is_auto_managed) ? 'True' : 'False');
+        data.auto_managed = _((torrent.is_auto_managed) ? 'True' : 'False');
 
-        data.downloaded += ' (' + ((status.total_payload_download) ? fsize(status.total_payload_download) : '0.0 KiB') + ')';
+        data.downloaded += ' (' + ((torrent.total_payload_download) ? fsize(torrent.total_payload_download) : '0.0 KiB') + ')';
-        data.uploaded += ' (' + ((status.total_payload_download) ? fsize(status.total_payload_download): '0.0 KiB') + ')';
+        data.uploaded += ' (' + ((torrent.total_payload_download) ? fsize(torrent.total_payload_download): '0.0 KiB') + ')';
 
         for (var field in this.fields) {
             this.fields[field].innerHTML = data[field];
         }
-        var text = status.state + ' ' + status.progress.toFixed(2) + '%';
-        this.progressBar.updateProgress(status.progress / 100.0, text);
     }
 });

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

@@ -1,6 +1,6 @@
 /*!
  * Deluge.preferences.EncryptionPage.js
- * 
+ *
  * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -39,12 +39,12 @@ Deluge.preferences.Encryption = Ext.extend(Ext.form.FormPanel, {
 
     border: false,
     title: _('Encryption'),
-    
+
     initComponent: function() {
         Deluge.preferences.Encryption.superclass.initComponent.call(this);
 
         var optMan = deluge.preferences.getOptionsManager();
-        
+
         var fieldset = this.add({
             xtype: 'fieldset',
             border: false,
@@ -57,7 +57,7 @@ Deluge.preferences.Encryption = Ext.extend(Ext.form.FormPanel, {
             fieldLabel: _('Inbound'),
             mode: 'local',
             width: 150,
-            store: new Ext.data.ArrayStore({
+            store: Ext.create('Ext.data.Store', {
                 fields: ['id', 'text'],
                 data: [
                     [0, _('Forced')],
@@ -74,7 +74,7 @@ Deluge.preferences.Encryption = Ext.extend(Ext.form.FormPanel, {
             fieldLabel: _('Outbound'),
             mode: 'local',
             width: 150,
-            store: new Ext.data.SimpleStore({
+            store: Ext.create('Ext.data.Store', {
                 fields: ['id', 'text'],
                 data: [
                     [0, _('Forced')],
@@ -91,7 +91,7 @@ Deluge.preferences.Encryption = Ext.extend(Ext.form.FormPanel, {
             fieldLabel: _('Level'),
             mode: 'local',
             width: 150,
-            store: new Ext.data.SimpleStore({
+            store: Ext.create('Ext.data.Store', {
                 fields: ['id', 'text'],
                 data: [
                     [0, _('Handshake')],

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

@@ -29,7 +29,6 @@
  * 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.Plugins
@@ -43,7 +42,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
     height: 400,
     cls: 'x-deluge-plugins',
 
-    pluginTemplate: new Ext.Template(
+    pluginTemplate: Ext.create('Ext.Template',
         '<dl class="singleline">' +
             '<dt>Author:</dt><dd>{author}</dd>' +
             '<dt>Version:</dt><dd>{version}</dd>' +
@@ -69,10 +68,15 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
             return '<div class="x-grid3-check-col'+(v?'-on':'')+'"> </div>';
         }
 
+
+
         this.grid = this.add({
             xtype: 'grid',
-            store: Ext.create('Ext.data.JsonStore', {
+            store: Ext.create('Ext.data.Store', {
-                model: 'Deluge.data.PluginRecord'
+                model: 'Deluge.data.Plugin',
+                proxy: {
+                    type: 'memory'
+                }
             }),
             singleSelect: true,
             columns: [{
@@ -80,7 +84,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
                 header: _('Enabled'),
                 width: .2,
                 sortable: true,
-                tpl: new Ext.XTemplate('{enabled:this.getCheckbox}', {
+                tpl: Ext.create('Ext.XTemplate', '{enabled:this.getCheckbox}', {
                     getCheckbox: function(v) {
                         return '<div class="x-grid3-check-col'+(v?'-on':'')+'" rel="chkbox"> </div>';
                     }
@@ -103,7 +107,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
             autoScroll: true,
             margins: '5 5 5 5',
             items: [this.grid],
-            bbar: new Ext.Toolbar({
+            bbar: {
                 items: [{
                     cls: 'x-btn-text-icon',
                     iconCls: 'x-deluge-install-plugin',
@@ -117,7 +121,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
                     handler: this.onFindMorePlugins,
                     scope: this
                 }]
-            })
+            }
         });
 
         var pp = this.pluginInfo = this.add({
@@ -184,7 +188,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
     },
 
     onNodeClick: function(dv, index, node, e) {
-        var el = new Ext.Element(e.target);
+        var el = Ext.fly(e.target);
         if (el.getAttribute('rel') != 'chkbox') return;
 
         var r = dv.getStore().getAt(index);
@@ -222,7 +226,7 @@ Deluge.preferences.Plugins = Ext.extend(Ext.Panel, {
 
     onInstallPluginWindow: function() {
         if (!this.installWindow) {
-            this.installWindow = new Deluge.preferences.InstallPluginWindow();
+            this.installWindow = Ext.create('Deluge.preferences.InstallPluginWindow');
             this.installWindow.on('pluginadded', this.onPluginInstall, this);
         }
         this.installWindow.show();

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

@@ -30,11 +30,6 @@
  * statement from all source files in the program, then also delete it here.
  */
 
-Ext.define('PreferencesRecord', {
-    extend: 'Ext.data.Model',
-    fields: [{name: 'name', type: 'string'}]
-});
-
 /**
  * @class Deluge.preferences.PreferencesWindow
  * @extends Ext.Window
@@ -64,14 +59,14 @@ Ext.define('Deluge.preferences.PreferencesWindow', {
     initComponent: function() {
         this.callParent(arguments);
 
-        this.list = new Ext.list.ListView({
+        this.list = Ext.create('Ext.list.ListView', {
             store: Ext.create('Ext.data.Store', {
-                model: 'PreferencesRecord'
+                model: 'Deluge.data.Preferences'
             }),
             columns: [{
-                id: 'name',
                 renderer: fplain,
-                dataIndex: 'name'
+                dataIndex: 'name',
+                flex: 1
             }],
             singleSelect: true,
             listeners: {
@@ -80,7 +75,6 @@ Ext.define('Deluge.preferences.PreferencesWindow', {
                 }
             },
             hideHeaders: true,
-            autoExpandColumn: 'name',
             deferredRender: false,
             autoScroll: true,
             collapsible: true
@@ -112,26 +106,26 @@ Ext.define('Deluge.preferences.PreferencesWindow', {
         //this.addButton(_('Apply'), this.onApply, this);
         //this.addButton(_('Ok'), this.onOk, this);
 
-        this.optionsManager = new Deluge.OptionsManager();
+        this.optionsManager = Ext.create('Deluge.OptionsManager');
         this.on('afterrender', this.onAfterRender, this);
-        this.on('show', this.onShow, this);
 
+        this.afterMethod('onShow', this.afterShown, this);
         this.initPages();
     },
 
     initPages: function() {
         deluge.preferences = this;
-        this.addPage(new Deluge.preferences.Downloads());
+        this.addPage(Ext.create('Deluge.preferences.Downloads'));
-        this.addPage(new Deluge.preferences.Network());
+        //this.addPage(Ext.create('Deluge.preferences.Network'));
-        this.addPage(new Deluge.preferences.Encryption());
+        this.addPage(Ext.create('Deluge.preferences.Encryption'));
-        this.addPage(new Deluge.preferences.Bandwidth());
+        this.addPage(Ext.create('Deluge.preferences.Bandwidth'));
-        this.addPage(new Deluge.preferences.Interface());
+        this.addPage(Ext.create('Deluge.preferences.Interface'));
-        this.addPage(new Deluge.preferences.Other());
+        this.addPage(Ext.create('Deluge.preferences.Other'));
-        this.addPage(new Deluge.preferences.Daemon());
+        this.addPage(Ext.create('Deluge.preferences.Daemon'));
-        this.addPage(new Deluge.preferences.Queue());
+        this.addPage(Ext.create('Deluge.preferences.Queue'));
-        this.addPage(new Deluge.preferences.Proxy());
+        this.addPage(Ext.create('Deluge.preferences.Proxy'));
-        this.addPage(new Deluge.preferences.Cache());
+        this.addPage(Ext.create('Deluge.preferences.Cache'));
-        this.addPage(new Deluge.preferences.Plugins());
+        this.addPage(Ext.create('Deluge.preferences.Plugins'));
     },
 
     onApply: function(e) {
@@ -164,7 +158,7 @@ Ext.define('Deluge.preferences.PreferencesWindow', {
     addPage: function(page) {
         var store = this.list.getStore();
         var name = page.title;
-        store.add([new PreferencesRecord({name: name})]);
+        store.add({name: name});
         page['bodyStyle'] = 'padding: 5px';
         page.preferences = this;
         this.pages[name] = this.configPanel.add(page);
@@ -229,7 +223,7 @@ Ext.define('Deluge.preferences.PreferencesWindow', {
     },
 
     // private
-    onShow: function() {
+    afterShown: function() {
         if (!deluge.client.core) return;
         deluge.client.core.get_config({
             success: this.onGotConfig,

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

@@ -1,6 +1,6 @@
 /*!
  * Deluge.preferences.ProxyField.js
- * 
+ *
  * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -49,7 +49,7 @@ Deluge.preferences.ProxyField = Ext.extend(Ext.form.FieldSet, {
             name: 'proxytype',
             mode: 'local',
             width: 150,
-            store: new Ext.data.ArrayStore({
+            store: Ext.create('Ext.data.Store', {
                 fields: ['id', 'text'],
                 data: [
                     [0, _('None')],
@@ -58,8 +58,8 @@ Deluge.preferences.ProxyField = Ext.extend(Ext.form.FieldSet, {
                     [3, _('Socksv5 with Auth')],
                     [4, _('HTTP')],
                     [5, _('HTTP with Auth')]
-                ]       
+                ]
-            }),    
+            }),
             editable: false,
             triggerAction: 'all',
             valueField: 'id',

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

@@ -42,25 +42,25 @@ Ext.define('Deluge.preferences.Proxy', {
 
     initComponent: function() {
         this.callParent(arguments);
-        this.peer = this.add(new Deluge.preferences.ProxyField({
+        this.peer = this.add(Ext.create('Deluge.preferences.ProxyField', {
             title: _('Peer'),
             name: 'peer'
         }));
         this.peer.on('change', this.onProxyChange, this);
 
-        this.web_seed = this.add(new Deluge.preferences.ProxyField({
+        this.web_seed = this.add(Ext.create('Deluge.preferences.ProxyField',{
             title: _('Web Seed'),
             name: 'web_seed'
         }));
         this.web_seed.on('change', this.onProxyChange, this);
 
-        this.tracker = this.add(new Deluge.preferences.ProxyField({
+        this.tracker = this.add(Ext.create('Deluge.preferences.ProxyField', {
             title: _('Tracker'),
             name: 'tracker'
         }));
         this.tracker.on('change', this.onProxyChange, this);
 
-        this.dht = this.add(new Deluge.preferences.ProxyField({
+        this.dht = this.add(Ext.create('Deluge.preferences.ProxyField', {
             title: _('DHT'),
             name: 'dht'
         }));