Ext.js5的小部件表格（23）

view

/**
 * This example shows how to create Widgets in grid columns. Widgets are lightweight
 * components with a simpler lifecycle.
 * 这个例子展示了怎样在表格列中创建小部件。
 */
Ext.define('KitchenSink.view.grid.WidgetGrid', {
    extend: 'Ext.grid.Panel',
    requires: [
        'Ext.grid.column.Action',
        'Ext.ProgressBarWidget',
        'Ext.slider.Widget',
        'Ext.sparkline.*'
    ],
    xtype: 'widget-grid',
    store: 'Widgets',
    collapsible: true,
    height: 350,
    width: 1050,
    title: 'Widget Grid',
    viewConfig: {
        stripeRows: true,
        //enableTextSelection是否启用文本选择
        enableTextSelection: false,
        //标记记录已被修改。True 当单元格被修改时，显示单元格指示器（左上角的红三角）
        markDirty: false
    },
    //是给Grid实现鼠标在行经过时的轨迹效果,鼠标掠过这条数据的时候这条数据高亮显示
    trackMouseOver: false,
    disableSelection: true,

    initComponent: function () {
        var me = this;

        me.columns = [{
            text: 'Button',
            width: 105,
            xtype: 'widgetcolumn',
            dataIndex: 'progress',
            widget: {
                width: 90,
                xtype: 'splitbutton',
                icon: '../shared/icons/fam/feed_add.png',
                handler: function(btn) {
                    var rec = btn.getWidgetRecord();
                    Ext.Msg.alert("Button clicked", "Hey! " + rec.get('name'));
                }
            }
        }, {
            text     : 'Progress',
            xtype    : 'widgetcolumn',
            width    : 120,
            dataIndex: 'progress',
            widget: {
                xtype: 'progressbarwidget',
                //给进度条创建背景，接受两个参数
                //value 0-1之间
                //percent 在0-100之间
                textTpl: [
                    '{percent:number("0")}% done'
                ]
            }
        }, 
        {
            text: 'Run Mode',
            width: 150,
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'combo',
                store: [
                    'Local',
                    'Remote'
                ],
                listeners: {
                    select: function(combo){
                        console.log(combo.getValue() + ' selected');
                    }
                }
            }
        },
        {
            text     : 'Slider',
            xtype    : 'widgetcolumn',
            width    : 120,
            dataIndex: 'progress',
            widget: {
                xtype: 'sliderwidget',
                minValue: 0,
                maxValue: 1,
                //// 精确到小数点后两位
                decimalPrecision: 2,
                listeners: {
                    change: function(slider, value) {

                        // If the widget has been decorated by the WidgetColumn with context-returning methods
                        // then extract data and update its context record.
                        if (slider.getWidgetRecord) {
                            var rec = slider.getWidgetRecord();
                            if (rec) {
                                rec.set('progress', value);
                            }
                        }
                    }
                }
            }
        }, {
            text: 'Line',
            width: 100,
            dataIndex: 'sequence1',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklineline',
                tipTpl: 'Value: {y:number("0.00")}'
            }
        }, {
            text: 'Bar',
            width: 100,
            dataIndex: 'sequence2',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinebar'
            }
        }, {
            text: 'Discrete',
            width: 100,
            dataIndex: 'sequence3',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinediscrete'
            }
        }, {
            text: 'Bullet',
            width: 100,
            dataIndex: 'sequence4',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinebullet'
            }
        }, {
            text: 'Pie',
            width: 60,
            dataIndex: 'sequence5',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinepie'
            }
        }, {
            text: 'Box',
            width: 100,
            dataIndex: 'sequence6',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinebox'
            }
        }, {
            text: 'TriState',
            width: 100,
            dataIndex: 'sequence7',
            xtype: 'widgetcolumn',
            widget: {
                xtype: 'sparklinetristate'
            }
        }];

        me.tbar = [];
        for (var i = 0; i < me.columns.length; i++) {
            me.tbar.push({
                text: me.columns[i].text,
                enableToggle: true,
                pressed: true,
                scope: me,
                toggleHandler: me.onButtonToggle
            });
        }

        me.callParent();
        me.on({
            columnshow: me.onColumnToggle,
            columnhide: me.onColumnToggle
        });
    },

    onButtonToggle: function(btn, pressed) {
        if (this.processing) {
            return;
        }

        this.processing = true;
        var header = this.headerCt.child('[text=' + btn.text + ']');
        header.setVisible(pressed);
        this.processing = false;
    },

    onColumnToggle: function(headerCt, header) {
        if (this.processing) {
            return;
        }
        this.processing = true;
        var btn = this.down('toolbar').child('[text=' + header.text + ']');
        btn.setPressed(header.isVisible());
        this.processing = false;
    }
});

store

Ext.define('KitchenSink.store.Widgets', {
    extend: 'Ext.data.ArrayStore',
    model: 'KitchenSink.model.Widget',
    data: (function() {
        var result = [],
            i,
            generateSequence = function(count, min, max) {
                var j,
                    sequence = [];

                if (count == null) {
                    count = 20;
                }
                if (min == null) {
                    min = -10;
                }
                if (max == null) {
                    max = 10;
                }
                for (j = 0; j < count; j++) {
                    sequence.push(Ext.Number.randomInt(min, max));
                }
                return sequence;
            };

        for (i = 0; i < 8; i++) {
            result.push([i + 1, 'Record ' + (i + 1), Ext.Number.randomInt(0, 100) / 100, generateSequence(), generateSequence(), generateSequence(), generateSequence(20, 1, 10), generateSequence(4, 10, 20), generateSequence(), generateSequence(20, -1, 1)]);
        }
        return result;
    })()
});

model

Ext.define('KitchenSink.model.Widget', {
    extend: 'KitchenSink.model.Base',
    fields: [
       {name: 'name'},
       {name: 'progress', type: 'float'},
       'sequence1',
       'sequence2',
       'sequence3',
       'sequence4',
       'sequence5',
       'sequence6',
       'sequence7'
    ]
});