`
qq1988627
  • 浏览: 107122 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Extjs grid横向滚动条

 
阅读更多

关于Extjs gridpanel设置autoHeight:true时,横向滚动条的问题 使用gridpanel时我们有时需要给设置autoHeight:true,但这时如果表格的宽度大于它的容器的宽度,多余的内容就会被隐藏而不会出现 横向的滚动条,费了老大劲儿才找到了解决办法,方法就是给gridpanel的option config添加如下属性:

view plaincopy to clipboardprint?
viewConfig : {  
    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;  
        if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display:  
            // none?  
            return;  
        }  
        if (g.autoHeight) {  
            this.el.dom.style.width = "100%";  
            this.el.dom.style.overflow = "auto";  
            this.el.dom.firstChild.style.overflow = "visible";  
            this.el.dom.firstChild.style.cssFloat = "left";  
            this.el.dom.firstChild.firstChild.style.cssFloat = "left";  
            this.el.dom.firstChild.firstChild.nextSibling.style.cssFloat = "left";  
            this.el.dom.firstChild.firstChild.firstChild.style.overflow = "visible";  
            this.el.dom.firstChild.firstChild.nextSibling.style.overflow = "visible";  
        } 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);  
    }  

viewConfig : {
 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;
  if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display:
   // none?
   return;
  }
  if (g.autoHeight) {
   this.el.dom.style.width = "100%";
   this.el.dom.style.overflow = "auto";
   this.el.dom.firstChild.style.overflow = "visible";
   this.el.dom.firstChild.style.cssFloat = "left";
   this.el.dom.firstChild.firstChild.style.cssFloat = "left";
   this.el.dom.firstChild.firstChild.nextSibling.style.cssFloat = "left";
   this.el.dom.firstChild.firstChild.firstChild.style.overflow = "visible";
   this.el.dom.firstChild.firstChild.nextSibling.style.overflow = "visible";
  } 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);
 }
}
 

解决过程中遇到了好多问题,如header的背景不全,不是所有的列都能resize(已经设置了 resizable:true),所以可能还有很多问题我没有发现。如果谁发现有什么问题,希望不吝赐教。

修改:

又发现了一个简单的方法比上边效果好多了,嘿嘿

view plaincopy to clipboardprint?
viewConfig : {  
    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;  
        if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display:  
            // none?  
            return;  
        }  
        if (g.autoHeight) {  
            if (this.innerHd) {  
                this.innerHd.style.width = (vw) + 'px';  
            }  
        } 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);  
    }  

viewConfig : {
 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;
  if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display:
   // none?
   return;
  }
  if (g.autoHeight) {
   if (this.innerHd) {
    this.innerHd.style.width = (vw) + 'px';
   }
  } 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);
 }
}



 以前用2.0时候

现在直接配置

viewConfig:{
                    autoFill:true,
                    foreceFit:true
                },

分享到:
评论

相关推荐

    ExtJs2.2的grid滚动条以及点Grid发生偏移问题

    Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。 Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条...

    Extjs gridpanel 出现横向滚动条问题的解决方法

    // not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw &lt; 20 || csize.height &lt; 20)) { // display: // none? ...

    ExtJs2.2的grid滚动条以及点击Grid发生偏移问题

    Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。 Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条...

    Extjs4.0 列隐藏和滚动条动态加载

    在ExtJS 4.0版本中,它提供了一系列功能,包括表格面板(Grid Panel)的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中,表格面板允许用户动态隐藏或显示列,以...

    Extjs grid panel自带滚动条失效的解决方法

    如果列的总宽度超过了容器的宽度,就会出现水平滚动条;反之,如果数据行的数量超过了可视区域,就会出现垂直滚动条。滚动条的存在是为了让用户能够查看那些超出当前视窗的数据。 滚动条失效通常表现为:即使用户...

    ExtJS下grid的一些属性说明

    - `forceFit`: 是否根据网格宽度自动调整列宽以避免横向滚动条出现。 - `enableGroupingMenu`: 控制列头下拉菜单中是否包含分组选项。 - `showGroupName`: 分组依据的列头是否显示分组名称。 - `...

    ExtJs高级技巧

    1. **将列的width设为auto**:这种方法会使列宽自动伸展,但可能导致水平滚动条出现。 2. **修改CSS中的white-space属性**:将`.x-grid3-cell-inner`的`white-space`属性设置为`normal!important;`,可以使超出列宽...

    Ext Js权威指南(.zip.001

    10.1.6 虚拟滚动条的工作原理:ext.grid.pagingscroller / 511 10.1.7 锁定列的运行流程:ext.grid.lockable与ext.grid.lockingview / 516 10.2 使用grid / 520 10.2.1 最简单的grid / 520 10.2.2 列的配置项 /...

Global site tag (gtag.js) - Google Analytics