javascript - Ext.js 将列添加到属性网格

Question

如何在属性网格中添加一列？到目前为止，我已经尝试了以下方法:

source : dataForGrid.source,
columns : [
            {
                text: 'text',
                xtype : 'checkcolumn',
                dataIndex : 'status',
                width : 100,
                editor : {
                    xtype : 'checkbox'
                },
                listeners : {
                    checkchange : function (checkColumn, rowIndex, checked, eOpts ) {
                        //some code here
                    }
                },
                renderer: function(val, m, rec, rowIndex) {
                    //some code here
                } 
            },
            {
                text: 'TEST',
                sortable: false,
                dataIndex: 'value2',
                field: {
                    xtype: 'textfield'
                }
            }
        ],
customEditors: dataForGrid.customEditors,

我的源非常标准，我有一个 tempObj 女巫拥有以下属性(dataForGrid 被传递到网格的源属性):

tempObj.name = data[i].some;
        tempObj.text = data[i].some === '' ? '' : '<a class="clientNameTextSomeGrid" onclick="console.log(123)">' + data[i].some + '</a>';
        tempObj.editor = data[i].someother;
        tempObj.datatype = 'nvarchar';
        tempObj.editable = true;
        tempObj.status = data[i].someother === 'A' ? true : false;
        tempObj.renderer = "";
        tempObj.value2 = "gcgrg";
dataForGrid.source.push(tempObj);

我有一个自定义编辑器:

var newField = Ext.create('Ext.form.ComboBox', {
            name: data[i].some,
            store: tempStore,
            clientID: tempObj.editor,
            queryMode: 'local',
            editable: false,
            displayField: 'value',
            valueField: 'id',
            triggerAction: 'all'
        });
dataForGrid.customEditors[data[i].some] = new Ext.grid.CellEditor({
            field: newField
        });

复选框(和使用自定义编辑器的组合框)工作正常。但是我无法向“TEST”列添加值(该列出现但没有值)。任何帮助将不胜感激。如果您有任何疑问或需要更多代码，请在下方发表评论，我们会提供。

*更新:如果我的第二列的 dataIndex 属性包含“status”值(来自 tempObj)，则该列将使用特定值呈现，但如果我使用来自再次使用 tempObj，该列仍为空。

Answer 1

我们实现这一目标的方法是扩展模型:

Ext.define('Ext.ux.grid.property.Property', {
    extend: 'Ext.data.Model',
    idProperty: 'name',
    fields: [   
        {
            name: 'name',
            type: 'string'
        },
        {
            name: 'text',
            type: 'string'
        },
        {
            name: 'value'
        },
        {
            name: 'editor'  // custom editor
        },
        {
            name: 'group',  // for grouping
            type: 'string'
        },
        {
            name: 'editable',
            type: 'boolean',
            defaultValue: true
        },
        {
            name: 'status',
            type: 'boolean'
        },
        {
            name: 'renderer',    // custom renderer
            defaultValue: null
        },
        //////////////////////////////////////
        // custom fields begin here
        // Custom Properties grid
        {
            name: 'someName',
            type: 'string'
        }
    ]
});

然后源变成了:

tempObj.name = data[i].some;
    tempObj.text = data[i].some === '' ? '' : '<a class="clientNameTextSomeGrid" onclick="console.log(123)">' + data[i].some + '</a>';
    tempObj.editor = data[i].someother;
    tempObj.datatype = 'nvarchar';
    tempObj.editable = true;
    tempObj.status = data[i].someother === 'A' ? true : false;
    tempObj.renderer = "";
    tempObj.someName = "Something in here";
dataForGrid.source.push(tempObj);