Ext.js add column to property grid

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

  • Two-way binding not updating view model
  • Dynamically switch views in ExtJS 4 grid panel
  • How to bind Java object to Javascript control
  • Events in ExtJs
  • How to modify entered value in string filter
  • How to show a different field's value in an Ext grid grouping header?
  • 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.

  • Handling large grid datasets in JavaScript
  • Extjs hasone association
  • Paging in extjs grid
  • Which serverside Java technology to use with ExtJS
  • extjs 4 : display image from Mysql blob value
  • Extjs store.load with id causes CORS error
  • One Solution collect form web for “Ext.js add column to property grid”

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