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

Ext.js add column to property grid

本文关键字：属性网格添加 js Ext 更新时间：2023-09-26

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

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属性包含"status"值（来自tempObj），则该列将使用特定值进行渲染，但如果我再次使用tempObj的value2属性，该列将保持为空。

我们实现这一点的方法是扩展模型：

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