Change ExtJS Grid Height in Javascript

How can I p开发者_如何学JAVAoint 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!

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);

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);