javascript - 在 Javascript 中更改 ExtJS 网格高度

Question

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

例如，与此相同:

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

我可以指向“网格”对象然后设置网格的大小吗？

任何帮助都会很棒!

Answer 1

除了上面的 Thariama 答案之外，如果您没有或不能保留对“网格”变量的引用，您可以为您正在创建的组件提供一个 ID，并稍后在代码中使用 ExtJS::getCmp 方法获取对您使用它的 ID 创建的 ExtJS 组件的引用。请注意，在此配置中，配置属性“id”设置为“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'
});

在你的网格启动后打开 Firebug ，下面的代码将设置网格的高度:

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