tidy up the code for the files tab

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

@@ -29,62 +29,55 @@
  * this exception statement from your version. If you delete this exception
  * statement from all source files in the program, then also delete it here.
  */
-(function() {
-	/* Renderers for the column tree */
-	function fileProgressRenderer(value) {
-		var progress = value * 100;
-		return Deluge.progressBar(progress, this.col.width, progress.toFixed(2) + '%', 0);
-	}
-	function priorityRenderer(value) {
-		if (isNaN(value)) return '';
-		return String.format('<div class="{0}">{1}</div>', FILE_PRIORITY_CSS[value], _(FILE_PRIORITY[value]));
-	}
 	
-	Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
+Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
 
-		constructor: function(config) {
-			config = Ext.apply({
 	title: _('Files'),
-				rootVisible: false,
+
 	autoScroll: true,
-				selModel: new Ext.tree.MultiSelectionModel(),
+	rootVisible: false,
 
 	columns: [{
 		header: _('Filename'),
 		width: 330,
 		dataIndex: 'filename'
 	}, {
-					xtype: 'tgrendercolumn',
 		header: _('Size'),
 		width: 150,
 		dataIndex: 'size',
-					renderer: fsize
+		tpl: new Ext.XTemplate('{size:this.fsize}', {fsize: fsize})
 	}, {
 		xtype: 'tgrendercolumn',
 		header: _('Progress'),
 		width: 150,
 		dataIndex: 'progress',
-					renderer: fileProgressRenderer
+		renderer: function(v) {
+			var progress = v * 100;
+			return Deluge.progressBar(progress, this.col.width, progress.toFixed(2) + '%', 0);
+		}
 	}, {
-					xtype: 'tgrendercolumn',
 		header: _('Priority'),
 		width: 150,
 		dataIndex: 'priority',
-					renderer: priorityRenderer
+		tpl: new Ext.XTemplate('<tpl if="!isNaN(priority)">' +
+			'<div class="{priority:this.getClass}">' +
+				'{priority:this.getName}' +
+			'</div></tpl>', {
+			getClass: function(v) {
+				return FILE_PRIORITY_CSS[v];
+			},
+
+			getName: function(v) {
+				return _(FILE_PRIORITY[v]);
+			}
+		})
 	}],
 	
 	root: new Ext.tree.TreeNode({
 		text: 'Files'
-				})
-			}, config);
+	}),
 
-			Deluge.details.FilesTab.superclass.constructor.call(this, config);
-		},
-
-		initComponent: function() {
-			
-			Deluge.details.FilesTab.superclass.initComponent.call(this);
-		},
+	selModel: new Ext.tree.MultiSelectionModel(),
 
 	clear: function() {
 		var root = this.getRootNode();
@@ -228,5 +221,4 @@
 			this.updateFileTree(files);
 		}
 	}
-	});
-})();
+});