Unable to view the last few rows of a grid

[sufyankhan]

Hello folks,

This is my first post on this site. I have been hooked to ExtJS for the past few months. While everything works like a charm, I just realized a strange issue while implementing grid. When a grid has a horizontal scroll bar, the last row simply does not display. At first I thought I might not be fetching the data properly. But that is not the case. The data which is in json format has say 81 results, but displays only 80 results. When I inspect element using Firebug, I can view the 81st row, but for some reason its hidden behind the scroll bar. Further if I try adding dockedItems to the grid panel, the view further reduces to 79. Kindly let me know if I am doing any thing wrong here

var createGrid = function(columndata, product_id) {
        grid = Ext.create('Ext.grid.Panel', {
            id: 'product-form',
            cls: 'product-grid',
            height:480,
            margin: '10 10 0 10',
            border:false,
            store: store,
            columns: [
                {xtype: 'rownumberer' /*, height:70 Would reduce another 3 rows*/},
                columndata
            ],
            stripeRows: true,
            /*Would reduce another 1 row
                dockedItems: [{
                xtype: 'toolbar',
                cls: 'customTab gridHead',
                items: [{
                    text: 'New Product',
                    cls:'advbutton',
                    margin: '2 0 2 5',
                    handler: function(){
                        newpopup(product_id);
                    }
                }]
            }],*/
            renderTo: 'productDiv'
        });
        grid.reconfigure(null, grid.initialConfig.columns);
} 

var createStore = function(fielddata, values) {
        store = Ext.create('Ext.data.ArrayStore', {
            fields: fielddata,
            data: values
        });
} 

Ext.Ajax.request({
        url: '/Products/view',
        success: function(response){
            var data = Ext.decode(response.responseText);
            createStore(data.fielddata, data.data);
            createGrid(data.header, data.product_id);
        }
}); 

[mitchellsimoens]

What Ext JS 4.x.x version and OS/Browser are you using?

[sufyankhan]

Extjs Version 4.0.7
Firefox 17.0

I have been able to find out what went wrong. Grid.reconfigure causes this problem. I was using reconfigure because my columns were not being displayed in the correct order. For example, the rownumberer would appear as the 5th column. Further the horizontal scrollbars would not appear in grids. A little more study revealed that one should not assign same id to multiple grids, even if the grids are on different pages. That is what was wrong at my end. Extjs stores the grid columns in cookies based on grid id. Now I have different ids for all my grids in the application.

However, I am not sure why Grid.reconfigure causes the problem which I reported. Also I would like to know if assigning different id to grids in one application the only way to work, or is there a work around?