Extjs Widget

widget column是用一个widget 配置参数指定xtype，表示该widget或component属于column中的cell内容。当一个widget cell 描画的时候，会将widget或component描画这个cell里。

sample:
效果图



代码：

var grid = new Ext.grid.Panel({
title: 'Substation power monitor',
width: 600,
columns: [{
text: 'Id',
dataIndex: 'id',
width: 120
}, {
text: 'Rating',
dataIndex: 'maxCapacity',
width: 80
}, {
text: 'Avg.',
dataIndex: 'avg',
width: 85,
formatter: 'number("0.00")'
}, {
text: 'Max',
dataIndex: 'max',
width: 80
}, {
text: 'Instant',
dataIndex: 'instant',
width: 80
}, {
text: '%Capacity',
width: 150,

// This is our Widget column
<strong>        xtype: 'widgetcolumn',
dataIndex: 'capacityUsed',

// This is the widget definition for each cell.
// Its "value" setting is taken from the column's dataIndex
widget: {
xtype: 'progressbarwidget',
textTpl: [
'{percent:number("0")}% capacity'
]
}</strong>
}],
renderTo: document.body,
disableSelection: true,
store: {
fields: [{
name: 'id',
type: 'string'
}, {
name: 'maxCapacity',
type: 'int'
}, {
name: 'avg',
type: 'int',
calculate: function(data) {
// Make this depend upon the instant field being set which sets the sampleCount and total.
// Use subscript format to access the other pseudo fields which are set by the instant field's converter
return data.instant && data['total'] / data['sampleCount'];
}
}, {
name: 'max',
type: 'int',
calculate: function(data) {
// This will be seen to depend on the "instant" field.
// Use subscript format to access this field's current value to avoid circular dependency error.
return (data['max'] || 0) < data.instant ? data.instant : data['max'];
}
}, {
name: 'instant',
type: 'int',

// Upon every update of instantaneous power throughput,
// update the sample count and total so that the max field can calculate itself
convert: function(value, rec) {
rec.data.sampleCount = (rec.data.sampleCount || 0) + 1;
rec.data.total = (rec.data.total || 0) + value;
return value;
},
depends: []
}, {
name: 'capacityUsed',
calculate: function(data) {
return data.instant / data.maxCapacity;
}
}],
data: [{
id: 'Substation A',
maxCapacity: 1000,
avg: 770,
max: 950,
instant: 685
}, {
id: 'Substation B',
maxCapacity: 1000,
avg: 819,
max: 992,
instant: 749
}, {
id: 'Substation C',
maxCapacity: 1000,
avg: 588,
max: 936,
instant: 833
}, {
id: 'Substation D',
maxCapacity: 1000,
avg: 639,
max: 917,
instant: 825
}]
}
});