在Javascript中更改ExtJS网格高度

时间:2010-06-07 08:38:12

标签: javascript extjs window height

如何指向ExtJS网格的对象并手动设置高度(以像素为单位)?

例如,同样的:

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

我能够指向“网格”对象,然后设置网格的大小吗?

任何帮助都会很棒!

2 个答案:

答案 0 :(得分:4)

除了上面的Thariama答案之外,如果你没有或不能保留对'grid'变量的引用,你可以为你正在创建的组件提供一个ID,并在代码中使用{{1}使用它的ID获取引用回到你创建的ExtJS组件的方法。请注意,在此配置中,配置属性“id”设置为“myGrid”

ExtJS::getCmp

启动网格后,打开firebug,以下代码将设置网格的高度:

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

答案 1 :(得分:3)

我不确定我是否明白你想要什么。是否要在网格初始化时或渲染后设置网格高度?

用于在启动时使用php使用设置高度:

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

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

您也可以将变量heigtht_set设置为任何其他可用的javascript变量;

如果要在渲染网格后将高度设置为600,可以使用setHeight():

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