EXTJS Grid data issue

Question

I have a problem with Extjs grid component. If you look at the attached screen shot, you will see two lines JSON data which is right.

But, as you can see the attached screen shot, ExtJS grid component shows only one line which is weird problem. I tried everything no success :(

Here is the ExtJS code :

Data Store of the Customer Section :

    var customersStore = new Ext.data.JsonStore({
    root: 'customers',
    baseParams: { action: 'customers'},
    proxy: new Ext.data.HttpProxy({
        url: '../invoice/grid-master-details.php',
        method: 'POST'
    }),
    fields: ['MetroNo', 'SpecVatNo', 'HomeStoreNo', 'CustShortName', 'StoreName', 'months',
    { name: 'invtotal', type: 'float' },
    { name: 'invcount', type: 'int' }],
    idProperty: 'MetroNo'
});

Grid Initialization parameters :

    Ext.onReady(function() {
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    var customersGrid = new Ext.grid.GridPanel({
        title: 'Customer Informations',
        plugins: new Ext.ux.GridTotals(),
        renderTo: 'customers-div',
        store: customersStore,
        sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
        columns: [
            { id: 'vat-no',
                header: "Tax Number",
                width: 50,
                dataIndex: 'SpecVatNo',
                sortable: false,
                hidden: true

            },
            { id: 'store-name',
                header: 'Store Name',
                width: 70,
                dataIndex: 'StoreName',
                sortable: true
            },
            { id: 'cust-name',
                header: 'Customer Title',
                width: 130,
                dataIndex: 'CustShortName',
                sortable: true,
                totalsText: 'TOTAL'
            },
            { id: 'invoice-count',
                header: "Invoice Address",
                width: 40,
                dataIndex: 'invcount',
                align: 'right',
                sortable: false,
                summaryType: 'sum'
            },
            { id: 'invoice-total',
                header: "Invoice Total",
                width: 60,
                dataIndex: 'invtotal',
                align: 'right',
                sortable: false,
                renderer: Ext.util.Format.CurrencyFactory(true, 2, ",", ".", "TL", true),
                summaryType : 'sum',
                roundToPlaces: 3
            },
            {
                id: 'selected-date',
                header: "Period",
                width: 20,
                dataIndex: 'months',
                sortable: false,
                hidden: true
            }               
        ],
        autoExpandColumn: 'cust-name',
        width: 700,
        height: 240,
        loadMask: {msg:'Loading customer infos ...'},
        stripeRows: true,
        columnLines:true,
        stateful: true,
        stateId: 'customerGrid',
        viewConfig: {
            forceFit: true
        },
        tbar: new Ext.Toolbar({
            items: [{   xtype: 'tbtext', text: 'Period' }, 
                    {   xtype: 'tbspacer', width: 10},
                    {   xtype: 'combo',
                            store: datesStore,
                            id: 'monthid',
                            displayField: 'months',
                            valueField: 'dateid',
                            editable: false,
                            mode: 'remote',
                            forceSelection: true,
                            triggerAction: 'all',
                            emptyText: 'Select Period...',
                            selectOnFocus: true
                    }, 
                    {   xtype: 'tbspacer', width: 15},
                    {   xtype: 'tbseparator'},
                    {   xtype: 'tbspacer', width: 10},
                    {   xtype: 'tbtext', text: 'Tax Number'},
                    {   xtype: 'tbspacer', width: 10},
                    {   xtype: 'textfield', id: 'vatnoid'},
                    {   xtype: 'tbspacer', width: 10},
                    {   xtype: 'button', 
                            text: ' Show ', 
                            iconCls: 'quicksearch',
                            handler: function() {
                                var mid = Ext.getCmp('monthid').getValue();
                                var vid = Ext.getCmp('vatnoid').getValue();
                                customersStore.load({
                                    params: {'months': mid, 'vatno': vid}
                                });
                            }
                    }
                    ]
        })
    });

Answer 1

The idProperty on underlying Model class is specified as MetroNo, which is not unique for each record returned in the JSON response.

Change idProperty to a field that is unique for each record.