GridPanel 自动添加滚动条

      Extjs中的gridPanel总是出不来滚动条，很是郁闷，搞了一下午总算搞定……

 

 先上图片：

   

               

代码：

var grid = new Ext.grid.GridPanel({
                tbar: tbar,
                id: 'grid_userlist',
                renderTo: 'div_cabinetList',
                autoHeight: true,
                autoScroll: true,
                store: store,
                stripeRows: true,
                listeners: {
                    'render': function() {
                        for (var i = 0; i < tbars.length; i++) {
                            tbars[i].render(this.tbar);
                        }
                    }
                },
    viewConfig : {
       scrollOffset: -3 , //去掉右侧空白区域  具体数值可能需要调整
     layout : function() {
      if (!this.mainBody) {
       return; // not rendered
      }
      var g = this.grid;
      var c = g.getGridEl();
      var csize = c.getSize(true);
      var vw = csize.width;
      var vh=csize.height;
      if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display:
       // none?
       return;
      }
      if (g.autoHeight) {
       this.el.dom.style.width = "100%";
       
       //计算grid高度
       var girdcount=store.getCount();
             var gridHeight=0;
       for(var i=0;i<girdcount;i++){
           gridHeight=gridHeight+grid.getView().getRow(i).clientHeight;
        } 
       this.el.dom.style.height =gridHeight+75;//75是菜单栏和分页栏高度和
       
       this.el.dom.style.overflowX = "auto"; //只显示横向滚动条

      } else {
       this.el.setSize(csize.width, csize.height);
       var hdHeight = this.mainHd.getHeight();
       var vh = csize.height - (hdHeight);
       this.scroller.setSize(vw, vh);
       if (this.innerHd) {
        this.innerHd.style.width = (vw) + 'px';
       }
      }
      if (this.forceFit) {
       if (this.lastViewWidth != vw) {
        this.fitColumns(false, false);
        this.lastViewWidth = vw;
       }
      } else {
       this.autoExpand();
       this.syncHeaderScroll();
      }
      this.onLayout(vw, vh);
     }  
    },
                cm: cm,
                bbar: new Ext.PagingToolbar({
                    pageSize: pageSize,
                    store: store,
                    autoWidth: true,
                    id:"btn_bbar",
                    displayInfo: true,
                    displayMsg: '<%=map.get("011") %>'+' {0}' + '<%=map.get("012") %> '+'{1} '+'<%=map.get("013") %>'+'<%=map.get("014") %> '+'{2} '+'<%=map.get("015") %>',//显示第几条到几条记录，一共多少条
                    emptyMsg: '<%=map.get("016") %>'//没有记录
                }) 
            });

 

注： （1） 出现滚动条的关键代码是 viewConfig属性的配置 ；

       （2） autoHeight: true,