ExtJs实践(5)——解决在GridPanel中使用bbar或者tbar的分页条的宽度自适应问题

        在GridPanel中利用bbar或者tbar来完成分页功能,是个很常见的做法,但是这里发现一个问题,就是宽度不能够自适应。首先我们看下这样的源代码:

代码
var  store  =   new  Ext.data.Store({ 
    proxy: 
new  Ext.data.ScriptTagProxy({ url: main_domain  +  page._handlers[ ' enterprise ' +   ' getList '  }), 
    
// proxy: new Ext.data.HttpProxy({ url: page._handlers['enterprise'] + 'getList' }), 
    reader:  new  Ext.data.JsonReader({ 
        totalProperty: 
' TotalProperty '
        root: 
' List '  
    }, [ 
        { name: 
' Id '  }, 
        { name: 
' Code '  }, 
        { name: 
' Name '  }, 
        { name: 
' CreateTime '  } 
    ]) 
    
// sortInfo: { field: "Name", direction: "ASC" } 
}); 
store.load({ params: { start: 
0 , limit:  5 } });
var  selModel  =   new  Ext.grid.CheckboxSelectionModel();
var  grid  =   new  Ext.grid.GridPanel({ 
    renderTo: 
' gridEnterprise '
    stripeRows: 
true //  斑马线效果 
     // width:'100%', 
    autoHeight:  true
    autoWidth: 
true
    loadMask: 
true
    
//             frame: true, 
     //             autoExpandColumn: 'Id', 
     //             columnLines: true, 
    store: store, 
    selModel: selModel, 
    columns: [ 
        
new  Ext.grid.RowNumberer(), 
        selModel, 
        { header: 
' 编号 ' , dataIndex:  ' Id ' , sortable:  true  }, 
        { header: 
' Code ' , dataIndex:  ' Code ' , sortable:  true  }, 
        { header: 
' 企业名称 ' , dataIndex:  ' Name ' , sortable:  true  }, 
        { header: 
' 开户日期 ' , dataIndex:  ' CreateTime ' , sortable:  true  } 
    ], 
    viewConfig: { 
        enableRowBody: 
true  
        
// forceFit: true 
    } 
    bbar: 
new  Ext.PagingToolbar({ 
        pageSize: 
5
        store: store, 
        displayInfo: 
true
        displayMsg: 
' 显示第 {0} 条到 {1} 条记录,一共 {2} 条 '
        emptyMsg: 
" 没有记录 "  
    }) 
});

其中可以看到bbar作为底部工具栏,显示分页工具条。运行中代码。

image

发现底部没有随着浏览器尺寸的拖动而自适应。

这个问题今天被纠结了很久~先后用width:100%或者CSS去调整样式,都失败了。后来在Ext.all.debug.js的框架中找到一个onResize的事件,只要浏览器尺寸改变,就会触发该事件:

代码
onResize:  function  (adjWidth, adjHeight, rawWidth, rawHeight) { 
    
var  w  =  adjWidth, 
        h 
=  adjHeight;
    
if  (Ext.isDefined(w)  ||  Ext.isDefined(h)) { 
        
if  ( ! this .collapsed) {
            
if  (Ext.isNumber(w)) { 
                
this .body.setWidth(w  =   this .adjustBodyWidth(w  -   this .getFrameWidth())); 
            } 
else   if  (w  ==   ' auto ' ) { 
                w 
=   this .body.setWidth( ' auto ' ).dom.offsetWidth; 
            } 
else  { 
                w 
=   this .body.dom.offsetWidth; 
            }
             if  ( this .tbar) { 
                
this .tbar.setWidth(w); 
                
if  ( this .topToolbar) { 
                    
this .topToolbar.setSize(w); 
                } 
            } 
            
if  ( this .bbar) { 
                
this .bbar.setWidth(w); 
                
if  ( this .bottomToolbar) { 
                    
this .bottomToolbar.setSize(w);
                    
if  (Ext.isIE) { 
                        
this .bbar.setStyle( ' position ' ' static ' ); 
                        
this .bbar.setStyle( ' position ' '' ); 
                    } 
                } 
            }
   …
}

如果包含bbar或者tbar的话,就会重新设置浏览器调整过的宽度。于是,我把红色的部分注释掉,得到了解决。

 

     但是,我不想去修改Ext.all.debug.js的代码。因此,我建议在使用分页的时候,可以考虑多加一个分页的DIV层,比如:

< div  id ="gridEnterprise" ></ div >  
< div  id ="pager" ></ div >

然后修改脚本:

代码
var  pager  =   new  Ext.PagingToolbar({ 
    pageSize: 
5
    store: store, 
    displayInfo: 
true
    displayMsg: 
' 显示第 {0} 条到 {1} 条记录,一共 {2} 条 '
    emptyMsg: 
" 没有记录 "
    renderTo: 
' pager '  
});

这样问题也可以得到解决。

image

你可能感兴趣的:(gridPanel)