CODEWITHSUNDEEP
extjs
Ahsan
Ahsan

Reputation: 1084

ExtJS 4 > Grid > Dynamically set height to fit any number of records

In my ExtJS 4 Grid, I would like to set the height dynamically upon loading the records.

For instance:

  1. If my Grid loads 52 records, then it should show all the 52 records simultaneously (without any scroll-bar in the Grid).

  2. If my Grid loads 73 records, then it should show all the 73 records simultaneously (without any scroll-bar in the Grid).

i.e. I don't need any scroll bars in the Grid. Instead, I would like to use browser's scroll-bar instead.

Do anyone has a solution ?

Upvotes: 3

Views: 10884

Answers (4)

user3509105
user3509105

Reputation: 1

Ext.create('Ext.grid.Panel', {
    id: "empDetails",
    store: store,
    columns: [{
        text: "Name",
        dataIndex: 'Name'
    }, {
        text: "Age",
        dataIndex: 'Age'
    }],
    renderTo: 'example-grid',
    forceFit: true,
    width: 300,
    ***getTotalHeight: function() {
        return "auto";
    },***
    dockedItems: [{
        xtype: 'toolbar',
        items: [{
                text: 'Employee Details'
            }

        ]
    }]

});

Upvotes: 0

Nickey
Nickey

Reputation: 1381

Thanks for the help, this was the answer, though if you are outside the grid initialization, something like this seams more appropriate:

myGrid.getView().on('refresh', function () { var cellheight = 28; var titleHeight = 50; myGrid.setHeight(myGridStore.getCount() * cellheight + titleHeight); });

Upvotes: 1

Punith Raj
Punith Raj

Reputation: 2195

if u dont specify a height property for your grid. this will solve it.

Upvotes: 2

user954156
user954156

Reputation: 533

You have to handle the load event on the store of your grid, then change the grid height via 

youGrid.getStore().on('load', function anonym(){
   myGrid.setHeight(this.getCount() * 16); // to be calculated
}

Of course, you have to resize all parent container of this grid

Upvotes: 3

Related Questions