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也才开始用了一个月，是一个强大的类库，但是很多小细节的处理办法不是那么直观!