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作为底部工具栏，显示分页工具条。运行中代码。

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

这个问题今天被纠结了很久~先后用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
    '
     
 });
    
  

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