ExtJs: Store populated by Grid comes up as blank

Question

I am using an ArrayStore and filling it up by adding model records. This store is associated with a data grid.

Now the arraystore object is getting filled perfectly fine but the data is not coming up in the grid. In fact, on debugging, I found that the store of the grid (datagrid.store) also has the data, but still it does not display it on the screen!!

Following is my code.

Model:

Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel', {
extend: 'Ext.data.Model',
fields: [
    {
        name: 'attribute',
        type: 'string'
    },
    {   name: 'attributeValue',
        type: 'string'
    }
  ]
});

Store:

var attrValueStore = Ext.create('Ext.data.ArrayStore', {
    autoSync: true,
    model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});

Grid

Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueGrid', {
//requires: ['Ext.ux.CheckColumn'],
autoRender: true,
extend: 'Ext.grid.Panel',
alias: ['widget.attributevaluegrid'],
id: 'SQLAttributeValueGrid',
store: attrValueStore,
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
})],
columns: [        
    {                        /*Expression */
        xtype: 'gridcolumn',
        text: 'Attribute',
        sortable: false,
        menuDisabled: true,
        flex: 0.225,
        dataIndex: 'attribute'
    },
    {                           /*Attribute Values*/
        xtype: 'gridcolumn',
        editor: 'textfield',
        text: 'Values',
        flex: 0.225,
        dataIndex: 'attributeValue'
    }
],
initComponent: function () {
    this.callParent(arguments);
}
});

Modal Window displaying the grid

var attributeValueForm = Ext.create('Ext.window.Window', {
title:'Missing Attribute Values',
id: 'attributeValueForm',
height:500,
width:400,
modal:true,
renderTo: Ext.getBody(),
closeAction: 'hide',
items:[
    {
        xtype: 'attributevaluegrid',
        border: false,
        //height: 80,
        region: 'center',
        split: true
    }
],
buttons: [
    {
        id: 'OKBtn',
        itemId: 'OKBtn',
        text: 'OK',
        handler: function () {
            Ext.getCmp('attributeValueForm').close();
        }
    },
    {
        text: 'Cancel',
        handler: function () {
            Ext.getCmp('attributeValueForm').close();
        }
    }
]
});

Now at the time of displaying the modal window, I checked the value of the store object as well as the store inside the grid object. Both are having the proper data.

But when the window opens, I am getting a blank grid

You're never loading the store anywhere. You don't assign it a proxy or give it inline data. The store is empty. — Evan Trimboli
@EvanTrimboli: I understand your point but I actually missed out on adding the code for adding the data into the store. I am doing it separately in another method wherein I create a model object, set values for its properties and add it into the store. So the store has the data. — DarkKnightFan

mfruizs2 mfruizs2 · Accepted Answer · 2013-05-08T12:25:48

Maybe you need to load the store data... try with:

var attrValueStore = Ext.create('Ext.data.ArrayStore', {
    autoSync: true,
    autoLoad : true,
    model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});

ExtJs: Store populated by Grid comes up as blank

1 Answers