Extjs3.2 GridPanel 高宽自动适应

效果如下:
Extjs3.2 GridPanel 高宽自动适应_第1张图片

需要在水平和垂直高度上都设置自适应。
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也才开始用了一个月,是一个强大的类库,但是很多小细节的处理办法不是那么直观!

 

你可能感兴趣的:(gridPanel)