web: fix the details status tab

Start porting over the status tab to the new extjs4 format
This commit is contained in:
Damien Churchill 2011-10-31 20:40:14 +00:00
parent 717e66b836
commit f5e6eabee4
1 changed files with 77 additions and 19 deletions

View File

@ -32,41 +32,79 @@
/**
* @class Deluge.details.StatusTab
* @extends Ext.Panel
* @extends Ext.panel.Panel
*/
Ext.define('Deluge.details.StatusTab', {
extend: 'Ext.Panel',
extend: 'Ext.panel.Panel',
title: _('Status'),
autoScroll: true,
bodyPadding: 10,
initComponent: function() {
this.callParent(arguments);
this.columns = [];
this.queuedColumns = [];
this.queuedItems = {};
this.fields = {};
this.progressBar = this.add({
xtype: 'progressbar',
cls: 'x-deluge-torrent-progressbar'
});
this.torrentPanel = this.add({
xtype: 'panel'
xtype: 'panel',
cls: 'x-deluge-status',
bodyPadding: 10,
border: 0
});
this.body = this.torrentPanel.body;
this.addColumn();
this.addColumn();
this.addColumn({width: '300px'});
this.addColumn();
this.addItem(0, 'downloaded', _('Downloaded'));
this.addItem(0, 'uploaded', _('Uploaded'));
this.addItem(0, 'share', _('Share Ratio'));
this.addItem(0, 'announce', _('Next Announce'));
this.addItem(0, 'tracker', _('Tracker Status'));
this.addItem(1, 'downspeed', _('Speed'));
this.addItem(1, 'upspeed', _('Speed'));
this.addItem(1, 'eta', _('ETA'));
this.addItem(1, 'pieces', _('Pieces'));
this.addItem(2, 'seeders', _('Seeders'));
this.addItem(2, 'peers', _('Peers'));
this.addItem(2, 'avail', _('Availability'));
this.addItem(2, 'auto_managed', _('Auto Managed'));
this.addItem(2, 'last_seen_complete', _('Last Seen Complete'));
this.addItem(3, 'active_time', _('Active Time'));
this.addItem(3, 'seeding_time', _('Seeding Time'));
this.addItem(3, 'seed_rank', _('Seed Rank'));
this.addItem(3, 'time_rank', _('Date Added'));
},
addColumn: function() {
var i = this.columns.push(false);
if (this.rendered) {
this.doAddColumn();
}
return i;
},
addItem: function(id, label) {
addColumn: function(style) {
style = style || {};
if (!this.rendered) {
this.queuedItems[id] = label;
this.queuedColumns.push(style);
} else {
this.doAddItem(id, label);
this.doAddColumn(style);
}
},
addItem: function(col, id, label) {
if (!this.rendered) {
this.queuedItems[id] = {
col: col,
label: label
};
} else {
this.doAddItem(col, id, label);
}
},
@ -77,13 +115,20 @@ Ext.define('Deluge.details.StatusTab', {
});
},
doAddColumn: function() {
var dl = Ext.core.DomHelper.append(this.body, {tag: 'dl'}, true);
doAddColumn: function(style) {
var dl = Ext.core.DomHelper.append(this.body, {
tag: 'dl',
style: style
}, true);
return this.columns.push(dl);
},
doAddItem: function(id, label) {
//Ext.core.DomHelper.append(this.dl,
doAddItem: function(col, id, label) {
var col = this.columns[col],
dh = Ext.core.DomHelper;
dh.append(col, {tag: 'dt', cls: id, html: label + ':'});
this.fields[id] = dh.append(col, {tag: 'dd', cls: id, html: ''}, true);
},
clear: function() {
@ -93,6 +138,19 @@ Ext.define('Deluge.details.StatusTab', {
}
},
onRender: function(ct, position) {
this.callParent(arguments);
var i = 0;
for (; i < this.queuedColumns.length; i++) {
this.doAddColumn(this.queuedColumns[i]);
}
for (var id in this.queuedItems) {
var item = this.queuedItems[id];
this.doAddItem(item.col, id, item.label);
}
},
onPanelUpdate: function(el, response) {
this.fields = {};
Ext.each(Ext.query('dd', this.torrent.body.dom), function(field) {
@ -132,7 +190,7 @@ Ext.define('Deluge.details.StatusTab', {
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];
this.fields[field].dom.innerHTML = data[field];
}
}
});