Ext.js add column to property grid

Question

How can i add a column inside a property grid? So far I've tried the following:

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,

My source is pretty standard, I have a tempObj witch hold the following properties (the dataForGrid is passed to the source property of the grid):

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

And i have a customEditors:

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

The checkbox (and the combobox using the customEditors) works fine. But I'm unable to add value to the 'TEST' column (the column appear but no value in it). Any help will be appreciated. If you have questions or you need more code, write a comment below and it will be provided.

*UPDATE: If my dataIndex property of the second column holds the 'status' value (from the tempObj), the column is rendered with the specific values, but if i use value2 property from the tempObj again, the column remains empty.

sla55er sla55er · Accepted Answer · 2014-01-03T14:57:47

The way that we accomplished that was extending the model:

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

And then the source became:

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

Ext.js add column to property grid

1 Answers