diff --git a/deluge/ui/web/js/deluge-all/Deluge.Details.Details.js b/deluge/ui/web/js/deluge-all/Deluge.Details.Details.js
index 7a81646ba..c881ca707 100644
--- a/deluge/ui/web/js/deluge-all/Deluge.Details.Details.js
+++ b/deluge/ui/web/js/deluge-all/Deluge.Details.Details.js
@@ -1,6 +1,6 @@
 /*
 Script: Deluge.Details.Details.js
-    The details tab displayed in the details panel.
+	The details tab displayed in the details panel.
 
 Copyright:
 	(C) Damien Churchill 2009-2010 <damoxc@gmail.com>
@@ -20,72 +20,96 @@ Copyright:
 		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.
+	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.deluge.details.DetailsTab = Ext.extend(Ext.Panel, {
-    title: _('Details'),
-    bodyStyle: 'padding 5px',
-    
-    onRender: function(ct, position) {
-	Ext.deluge.details.DetailsTab.superclass.onRender.call(this, ct, position);
-	this.load({
-	    url: '/render/tab_details.html',
-	    text: _('Loading') + '...'
-	});
-	this.oldData = {};
-	this.body.setStyle('padding', '5px');
-	this.getUpdater().on('update', this.onPanelUpdate, this);
-    },
-    
-    clear: function() {
-	if (!this.fields) return;
-	for (var k in this.fields) {
-	    this.fields[k].innerHTML = '';
+	title: _('Details'),
+
+	fields: {},
+
+	queuedItems: {},
+
+	oldData: {},
+
+	initComponent: function() {
+		Ext.deluge.details.DetailsTab.superclass.initComponent.call(this);
+		this.addItem('torrent_name', _('Name'));
+		this.addItem('hash', _('Hash'));
+		this.addItem('path', _('Path'));
+		this.addItem('size', _('Total Size'));
+		this.addItem('files', _('# of files'));
+		this.addItem('comment', _('Comment'));
+		this.addItem('status', _('Status'));
+		this.addItem('tracker', _('Tracker'));
+	},
+	
+	onRender: function(ct, position) {
+		Ext.deluge.details.DetailsTab.superclass.onRender.call(this, ct, position);
+		this.body.setStyle('padding', '10px');
+		this.dl = Ext.DomHelper.append(this.body, {tag: 'dl'}, true);
+
+		for (var id in this.queuedItems) {
+			this.doAddItem(id, this.queuedItems[id]);
+		}
+	},
+
+	addItem: function(id, label) {
+		if (!this.rendered) {
+			this.queuedItems[id] = label;
+		} else {
+			this.doAddItem(id, label);
+		}
+	},
+
+	// private
+	doAddItem: function(id, label) {
+		Ext.DomHelper.append(this.dl, {tag: 'dt', cls: id, html: label + ':'});
+		this.fields[id] = Ext.DomHelper.append(this.dl, {tag: 'dd', cls: id, html: ''}, true);
+	},
+	
+	clear: function() {
+		if (!this.fields) return;
+		for (var k in this.fields) {
+			this.fields[k].dom.innerHTML = '';
+		}
+	},
+	
+	update: function(torrentId) {
+		Deluge.Client.core.get_torrent_status(torrentId, Deluge.Keys.Details, {
+			success: this.onRequestComplete,
+			scope: this,
+			torrentId: torrentId
+		});
+	},
+	
+	onRequestComplete: function(torrent, request, response, options) {
+		var data = {
+			torrent_name: torrent.name,
+			hash: options.options.torrentId,
+			path: torrent.save_path,
+			size: fsize(torrent.total_size),
+			files: torrent.num_files,
+			status: torrent.tracker_status,
+			tracker: torrent.tracker,
+			comment: torrent.comment
+		};
+		
+		for (var field in this.fields) {
+			if (!data[field]) continue; // this is a field we aren't responsible for.
+			if (data[field] == this.oldData[field]) continue;
+			this.fields[field].dom.innerHTML = Ext.escapeHTML(data[field]);
+		}
+		this.oldData = data;
 	}
-    },
-    
-    update: function(torrentId) {
-	Deluge.Client.core.get_torrent_status(torrentId, Deluge.Keys.Details, {
-	    success: this.onRequestComplete,
-	    scope: this,
-	    torrentId: torrentId
-	});
-    },
-    
-    onPanelUpdate: function(el, response) {
-	this.fields = {};
-	Ext.each(Ext.query('dd', this.body.dom), function(field) {
-	    this.fields[field.className] = field;
-	}, this);
-    },
-    
-    onRequestComplete: function(torrent, request, response, options) {
-	var data = {
-	    torrent_name: torrent.name,
-	    hash: options.options.torrentId,
-	    path: torrent.save_path,
-	    size: fsize(torrent.total_size),
-	    files: torrent.num_files,
-	    status: torrent.tracker_status,
-	    tracker: torrent.tracker,
-	    comment: torrent.comment
-	};
-	    
-	for (var field in this.fields) {
-	    if (data[field] == this.oldData[field]) continue;
-	    this.fields[field].innerHTML = Ext.escapeHTML(data[field]);
-	}
-	this.oldData = data;
-    }
 });
-Deluge.Details.add(new Ext.deluge.details.DetailsTab());
\ No newline at end of file
+Deluge.Details.add(new Ext.deluge.details.DetailsTab());
diff --git a/deluge/ui/web/render/tab_details.html b/deluge/ui/web/render/tab_details.html
deleted file mode 100644
index 14fd8a877..000000000
--- a/deluge/ui/web/render/tab_details.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<dl>
-	<dt class="torrent_name">${_("Name")}:</dt><dd class="torrent_name"/>
-	<dt class="hash">${_("Hash")}:</dt><dd class="hash"/>
-	<dt class="path">${_("Path")}:</dt><dd class="path"/>
-	<dt class="size">${_("Total Size")}:</dt><dd class="size"/>
-	<dt class="files">${_("# of files")}:</dt><dd class="files"/>
-	<dt class="comment">${_("Comment")}:</dt><dd class="comment" />
-	<dt class="status">${_("Status")}:</dt><dd class="status"/>
-	<dt class="tracker">${_("Tracker")}:</dt><dd class="tracker"/>
-</dl>
-<br style="clear: both;" />