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
       }]
   }
});