Change ExtJS Grid Height in Javascript

Question

How can I point at the object of a ExtJS Grid and manually set the height (in pixels)?

For example, with this same:

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
        {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
        {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
        {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 350,
    width: 600,
    title: 'Array Grid',
    // config options for stateful behavior
    stateful: true,
    stateId: 'grid'        
});

I would i be able to point at the "grid" object and then set the size of the grid?

Any help would be fantastic!

SBUJOLD · Accepted Answer · 2010-06-07 19:55:58Z

4

In addition to Thariama answer's above, if you don't or can't keep a reference to the 'grid' variable you can give an ID to the component you are creating and use later in the code the ExtJS::getCmp method to get a reference back to the ExtJS Component you created using it's ID. Notice in this configuration the configuration property 'id' is set to 'myGrid'

var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [
        {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
        {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
        {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
        {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
        {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    stripeRows: true,
    autoExpandColumn: 'company',
    height: 350,
    width: 600,
    title: 'Array Grid',
    // config options for stateful behavior
    stateful: true,
    stateId: 'grid',
    id: 'myGrid'
});

After your grid is initiated open up firebug and the following code will set the height of the grid:

Ext.getCmp('myGrid').setHeight(600);

answered Jun 7, 2010 at 19:55

SBUJOLD

1,4712 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ric Tokyo Over a year ago

+1 for Ext.getCmp('myGrid').setHeight(600); very useful tip always to set an id and use it.

Thariama · Accepted Answer · 2010-06-07 08:57:37Z

3

I am not perfectly sure if i did understand what you want. Do you want to set the grid heigth at initialisation of the grid or after rendering?

for setting the height at startup using php use:

var heigtht_set = <?php echo $grid_height ?>;

var grid = new Ext.grid.GridPanel({
    store: store,
...
    height: heigtht_set ? heigtht_set : 350,
...       
});

you may also set the variable heigtht_set to any other available javascript variable;

if you want to setthe height to 600 after rendering of the grid you may use setHeight():

var heigtht_set = 600;
grid.setHeight(heigtht_set);

edited Jun 7, 2010 at 8:57

answered Jun 7, 2010 at 8:52

Thariama

50.9k13 gold badges146 silver badges175 bronze badges

Collectives™ on Stack Overflow

Change ExtJS Grid Height in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related