Extjs3.2 GridPanel 高宽自动适应

效果如下：

需要在水平和垂直高度上都设置自适应。
SmartGWT（SmartClient）中可以让高度和宽度都为100%，SmartClient 的js类库会自动同步他和父容器的尺寸。
但是Extjs的GridPanel的AutoWidth和AutoHeight并不能起这个作用，而且100%的设置也不被支持。

后来发现，需要在父容器中设置Layout:'fit' 然后在GridPanel中增加 ViewConfig {forceFit: true, //让grid的列自动填满grid的整个宽度，不用一列一列的设定宽度。

代码如下：父容器

jobDefine: {
        title: '任务定义',
        iconCls: 'icon_job',
        closable: true,
        layout:'fit',
        tbar: new Ext.Toolbar({
            items: [{
                text: '新增任务',
                iconCls: 'btnAdd_icon'
            }, '-', {
                text: '删除任务',
                iconCls: 'btnDel_icon'
            }, '-', new Ext.ux.form.SearchField({
                store: jobInfoStore,
                emptyText: '输入任务名称搜索'
            })]
        }),
        items: [createJobInfoGrid('jobInfoGrid')]
    }

Grid Panel配置

var grid = new Ext.grid.GridPanel({
        id:id,
        cm: cm,
        sm: sm,
        store: jobInfoStore,
        border: false,
        loadMask: true,
        viewConfig: {
            forceFit: true, //让grid的列自动填满grid的整个宽度，不用一列一列的设定宽度。
            emptyText: '系统中还没有任务'
        },
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: jobInfoStore,
            displayInfo: true,
            displayMsg: '当前显示 {0} - {1} 共 {2} ',
            emptyMsg: "没有可显示的记录"
        })
    })

Extjs也才开始用了一个月，是一个强大的类库，但是很多小细节的处理办法不是那么直观!

转载于:https://www.cnblogs.com/Herist/archive/2011/07/08/2088729.html

Extjs3.2 GridPanel 高宽自动适应

相关推荐