关于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
},
分享到:
相关推荐
Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。 Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条...
// 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? ...
Bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。 Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条...
在ExtJS 4.0版本中,它提供了一系列功能,包括表格面板(Grid Panel)的列管理以及滚动条的动态加载。让我们深入探讨这些核心概念。 1. **列隐藏与显示** 在ExtJS 4.0中,表格面板允许用户动态隐藏或显示列,以...
如果列的总宽度超过了容器的宽度,就会出现水平滚动条;反之,如果数据行的数量超过了可视区域,就会出现垂直滚动条。滚动条的存在是为了让用户能够查看那些超出当前视窗的数据。 滚动条失效通常表现为:即使用户...
- `forceFit`: 是否根据网格宽度自动调整列宽以避免横向滚动条出现。 - `enableGroupingMenu`: 控制列头下拉菜单中是否包含分组选项。 - `showGroupName`: 分组依据的列头是否显示分组名称。 - `...
1. **将列的width设为auto**:这种方法会使列宽自动伸展,但可能导致水平滚动条出现。 2. **修改CSS中的white-space属性**:将`.x-grid3-cell-inner`的`white-space`属性设置为`normal!important;`,可以使超出列宽...
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 列的配置项 /...