ExtJS Checkcolumn未呈现选中的值

时间:2017-05-09 10:53:38

标签: javascript extjs checkbox grid

我有tab,名为"Schema",呈现grid。其中一个网格列为checkcolumn类型。 当我渲染网格时,我应该将哪些值传递给商店,因此我检查了一些复选框而未检查其他复选框?它必须是非常简单的东西,但我找不到迄今解决方案。

以下是网格和checkcolumn的简化结构:

{
title: 'Schema',
listeners: {
    activate: function(tab) {
        myNmsps.renderSchema();
    }
},
id: 'schemaTab',
items: [{
    xtype: 'grid',
    id: 'schema',
    border: false,
    data: [],
    columns: [
        {
            text: 'Name',
            dataIndex: 'name',
            editor: {
                xtype: 'textfield',
                isEditable: true,
            }
        },{
            text: 'Position',
            dataIndex: 'position',
            editor: {
                xtype: 'combobox',
                id: 'position',
            }
        }, {
            text: 'Type',
            dataIndex: 'type',
            id: "TypeDropdown",
            editor: {
                xtype: 'combobox',
                id: 'SelectType',
            }
        }, {
            text: 'Size',
            dataIndex: 'size',
            id: "SizeDropdown",
            editor: {
                xtype: 'combobox',
                id: 'SelectSize',
            }
        }, {
            text: 'FilteringType',
            dataIndex: 'filteringType',
            editor: {
                xtype: 'combobox',
                id: 'filteringType',
            }
        },  {
            xtype:'checkcolumn',
            fieldLabel: 'checkboxIsUnique',
            name: 'checkboxIsUnique',
            text: 'Is Unique',
            id: 'checkboxIsUniqueID',
            dataIndex : 'checkboxIsUniqueIDX',
            listeners:{
                checkchange: function(column, rowIdx, checked, eOpts){
                    var schemaStore = Ext.getCmp('schema').getStore();
                    schemaStore.each(function(record,idx){
                        if(rowIdx == idx && checked===true){
                            record.set('checkboxIsUnique',true);
                            record.raw[6] = true;
                        } else if(rowIdx == idx && checked===false){
                            record.set('checkboxIsUnique',false);
                            record.raw[6] = false;
                        }
                        record.commit();
                    }); 
                }
            }
        },
        {
            text: 'Delete',
            dataIndex: 'deleteColumn',
            id: "deleteColumn"
        }
    ],
    listeners: {
    },
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 2
        })
    ]
}

checkchange听众

这是生成商店并呈现网格的简化函数:

renderSchema: function() {
    var grid = Ext.getCmp("schema");

    for (var i = 0; i < myGridData; i++) {
        storeArr[i][0] = myGridData[i].name;
        storeArr[i][1] = myGridData[i].type;
        storeArr[i][2] = myGridData[i].size;
        storeArr[i][3] = i;
        storeArr[i][4] = "<button class='schemaDeleteButton x-btn'> </button>";
        storeArr[i][5] = myGridData[i].filteringType;
        storeArr[i][6] = myGridData[i].isUnique; // true/false;
    }

    var dataStore = Ext.create('Ext.data.ArrayStore', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'name'}, 
           {name: 'type'}, 
           {name: 'size'}, 
           {name: 'position'}, 
           {name: 'deleteColumn'},
           {name: 'filteringType'},
           {name: 'checkboxIsUnique'}
        ],
        data: storeArr
    });

    grid.suspendEvents();
    grid.reconfigure(dataStore);
    grid.resumeEvents();
}

所以我在字段checkboxIsUnique上传递true或false,但它不会影响我的界面:

enter image description here

1 个答案:

答案 0 :(得分:0)

我在dataStore函数中renderSchema中的字段应该被命名为'checkboxIsUniqueIDX'-与dataIndex组件中的checkcolumn相同。