Ext.js 将列添加到属性网格答案

【问题标题】：Ext.js add column to property gridExt.js 将列添加到属性网格
【发布时间】：2013-12-16 09:56:39
【问题描述】：

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

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

复选框（以及使用 customEditors 的组合框）工作正常。但我无法为“TEST”列添加值（该列出现但其中没有值）。任何帮助将不胜感激。如果您有任何疑问或需要更多代码，请在下方写下评论，我们会提供。

*更新：如果我的第二列的 dataIndex 属性包含“状态”值（来自 tempObj），则该列将使用特定值呈现，但如果我使用来自再次使用 tempObj，该列仍然为空。

【问题讨论】：

好问题，唯一的改进就是 jsFiddle

标签： javascript extjs

【解决方案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);

【讨论】：