ExtJS GridPanel与列上的radiobutton

时间:2017-10-04 14:12:39

标签: javascript extjs radio-button extjs6 gridpanel

所以我有一个通常的网格,有一些列:

                  {
                        xtype          : 'gridpanel',
                        mode           : "MULTI",
                        region         : 'center',
                        title          : "grid",
                        id             : 'datagridResult',  
                        margin         : '10 5 5 5',

                    columns : [
                               {
                                   xtype    : 'gridcolumn',
                                   dataIndex: 'TEST',
                                   flex     : 0.25
                               },   
                               {
                                   xtype    : 'gridcolumn',
                                   dataIndex: 'Test2'
                                   flex     : 2
                               },   
                               //...

我想要的是增加3个无线电按钮列(每列一个按钮)。我试过这样的事情:

                             {
                                   xtype    : 'gridcolumn',
                                   text     : "FOR"
                                   dataIndex: 'for',
                                   flex     : 1,
                                   editor: { 
                                        xtype     : 'radiofield',
                                        name      : 'Regex',
                                        inputValue: 'Checked'
                                    },
                               }

它不起作用。所以我在这里问任何消息。

1 个答案:

答案 0 :(得分:1)

  

它不起作用。所以我在这里要求任何sugestions

在ExtJS中有xtype:'widgetcolumn'。 窗口小部件列配置有窗口小部件配置对象,该对象指定xtype以指示此列的单元格中哪种类型的窗口小部件或组件属于。

我创建了一个Sencha Fiddle演示。它将展示如何工作。希望这会对你有所帮助。

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', {
        name: 'checked',
        type: 'boolean',
        defaultValue: true
    }],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254'
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        text: 'Status',
        width: 150,
        xtype: 'widgetcolumn',
        dataIndex: 'checked',
        onWidgetAttach: function (column, widget, record) {
            widget.down(`[inputValue=${record.get('checked')}]`).setValue(true);
        },
        widget: {
            xtype: 'radiogroup',
            items: [{
                boxLabel: 'Yes',
                inputValue: true
            }, {
                boxLabel: 'No',
                inputValue: false
            }]
        }
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});