diff --git a/deluge/ui/web/js/deluge-all/Deluge.Details.Files.js b/deluge/ui/web/js/deluge-all/Deluge.Details.Files.js
index b96fe95b0..47f51c0b6 100644
--- a/deluge/ui/web/js/deluge-all/Deluge.Details.Files.js
+++ b/deluge/ui/web/js/deluge-all/Deluge.Details.Files.js
@@ -40,7 +40,7 @@ Copyright:
return String.format('
{1}
', FILE_PRIORITY_CSS[value], _(FILE_PRIORITY[value]));
}
- Ext.deluge.details.FilesTab = Ext.extend(Ext.tree.ColumnTree, {
+ Ext.deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
constructor: function(config) {
config = Ext.apply({
@@ -54,16 +54,19 @@ Copyright:
width: 330,
dataIndex: 'filename'
}, {
+ xtype: 'tgcustomcolumn',
header: _('Size'),
width: 150,
dataIndex: 'size',
renderer: fsize
}, {
+ xtype: 'tgcustomcolumn',
header: _('Progress'),
width: 150,
dataIndex: 'progress',
renderer: fileProgressRenderer
}, {
+ xtype: 'tgcustomcolumn',
header: _('Priority'),
width: 150,
dataIndex: 'priority',
@@ -74,8 +77,14 @@ Copyright:
text: 'Files'
})
}, config);
+
Ext.deluge.details.FilesTab.superclass.constructor.call(this, config);
},
+
+ initComponent: function() {
+
+ Ext.deluge.details.FilesTab.superclass.initComponent.call(this);
+ },
onRender: function(ct, position) {
Ext.deluge.details.FilesTab.superclass.onRender.call(this, ct, position);
@@ -173,14 +182,15 @@ Copyright:
if (!child) {
child = new Ext.tree.TreeNode({
id: file,
- text: file
+ text: file,
+ filename: file
});
parent.appendChild(child);
}
walk(item, child);
} else {
if (!child) {
- child = new Ext.tree.ColumnTreeNode({
+ child = new Ext.tree.TreeNode({
id: file,
filename: file,
text: file, // this needs to be here for sorting
@@ -190,13 +200,10 @@ Copyright:
priority: item[3],
leaf: true,
iconCls: 'x-deluge-file',
- uiProvider: Ext.tree.ColumnNodeUI
+ uiProvider: Ext.ux.tree.TreeGridNodeUI
});
parent.appendChild(child);
}
- child.setColumnValue(1, item[1]);
- child.setColumnValue(2, item[2]);
- child.setColumnValue(3, item[3]);
}
}
}
diff --git a/deluge/ui/web/js/deluge-all/Deluge.Formatters.js b/deluge/ui/web/js/deluge-all/Deluge.Formatters.js
index be2ac0fa6..6a64f0c17 100644
--- a/deluge/ui/web/js/deluge-all/Deluge.Formatters.js
+++ b/deluge/ui/web/js/deluge-all/Deluge.Formatters.js
@@ -64,6 +64,7 @@ Deluge.Formatters = {
* @returns {string} formatted string with KiB, MiB or GiB units.
*/
size: function(bytes) {
+ if (!bytes) return '';
bytes = bytes / 1024.0;
if (bytes < 1024) { return bytes.toFixed(1) + ' KiB'; }
diff --git a/deluge/ui/web/js/ext-extensions/.build b/deluge/ui/web/js/ext-extensions/.build
index 4ea8f8ffa..476cc2989 100644
--- a/deluge/ui/web/js/ext-extensions/.build
+++ b/deluge/ui/web/js/ext-extensions/.build
@@ -12,4 +12,5 @@ add_file "TreeGridColumnResizer.js"
add_file "TreeGridNodeUI.js"
add_file "TreeGridLoader.js"
add_file "TreeGridColumns.js"
+add_file "TreeGridCustomColumn.js"
add_file "TreeGrid.js"
diff --git a/deluge/ui/web/js/ext-extensions/TreeGridCustomColumn.js b/deluge/ui/web/js/ext-extensions/TreeGridCustomColumn.js
new file mode 100644
index 000000000..b4b0f0e7c
--- /dev/null
+++ b/deluge/ui/web/js/ext-extensions/TreeGridCustomColumn.js
@@ -0,0 +1,9 @@
+Ext.tree.CustomColumn = Ext.extend(Ext.tree.Column, {
+
+ constructor: function(c) {
+ c.tpl = c.tpl || new Ext.XTemplate('{' + c.dataIndex + ':this.format}');
+ c.tpl.format = c.renderer;
+ Ext.tree.CustomColumn.superclass.constructor.call(this, c);
+ }
+});
+Ext.reg('tgcustomcolumn', Ext.tree.CustomColumn);
diff --git a/deluge/ui/web/server.py b/deluge/ui/web/server.py
index 8fe70126b..8f5c94b56 100644
--- a/deluge/ui/web/server.py
+++ b/deluge/ui/web/server.py
@@ -331,6 +331,7 @@ class TopLevel(resource.Resource):
"/js/ext-extensions/TreeGridNodeUI.js",
"/js/ext-extensions/TreeGridLoader.js",
"/js/ext-extensions/TreeGridColumns.js",
+ "/js/ext-extensions/TreeGridCustomColumn.js",
"/js/ext-extensions/TreeGrid.js",
"/config.js",
"/gettext.js",