ExtJS grid with empty store, on add/insert only shows the latest record added [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I have a grid that on load is empty and I want to populate based on a button click.

I开发者_StackOverflow中文版f the store has some data in to begin with (config), the new records are added and displayed in the grid no problem.

However, if I let the grid with no data in the begining, when adding new records, the store count is reflecting the additions but the grid only ever displays the latest added record.

Any suggestion of where to look would be greatly appreciated. Thank you.

Here is the code:

var srGrid = new Ext.grid.GridPanel({
    id: 'srGrid',
    title: 'Scheduled For',
    x: 230,
    y: 40,
    width: 200,
    store: new Ext.data.ArrayStore({
        fields: ['index', 'date'],
        idIndex: 0,
        autoLoad: false
    }),
    columns: [
        {dataIndex: 'date', id: 'srCol', width: 196, menuDisabled: true}
    ],
    listeners: {
        beforeshow: function() {
            //this.store.removeAll();
        }
    }
});

var srCustomContentPanel = new Ext.Panel({
    id: 'srCustomScheduleContent',
    border: false,
    layout: 'absolute',
    items: [
        srGrid,
        {
            xtype: 'button',
            id: 'addButton',
            text: 'Add to Scheduled',
            handler: function() {
                var idx = srGrid.store.getCount()+1;
                var newData = {
                    index: idx,
                    date: 'tomorrow'+idx
                };
                //var recId = 3; // provide unique id
                var p = new srGrid.store.recordType(newData, idx); // create new record
                console.log(p);
                srGrid.store.insert(0, p); 
            },
            x: 10,
            y: 250
        },
    ]}
);

---

Your code works for me: http://jsfiddle.net/sadkinson/rF5TQ/24/

I modified it slightly in order to render in jsfiddle. Perhaps it has something to do with the absolute layout you are using. You might check the DOM using FireBug and see if there are actually additional rows being added, but just aren't visible.

---

It turns out that I forgot to mention a height for the grid.

autoHeight: true fixed it.