Extjs滚动条处理
bodyStyle :'overflow-x:hidden;
overflow-y:scroll', //隐藏水平滚动条,显示用overflow-x:visible
hidden 隐藏scroll :一定有auto:自动
通过这个方法可以显示或隐藏滚动条
var form = new Ext.form.FormPanel({
frame : true,
labelWidth : 80,
height : 400,
autoScroll : true,
bodyStyle : 'overflow-x:hidden;
overflow-y:scroll',
items : []
【Extjs滚动条处理】})
ExtJs中如何使Panel的滚动条移到底部
ExtJS API：
autoScroll : Boolean
True表示为在面板body元素上，设置overflow： 'auto'...
True表示为在面板body元素上，设置overflow： 'auto' 和出现滚动条false表示为裁剪所有溢出的内容（默认为false）。True to use overflow : 'auto' on the panel 's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
对panle设置该属性为true
使用ExtJs中Panel组件时，可以通过设置autoScroll的值为true来自动添加滚动条。但有时panel溢出太多，而滚动条总是在最上方，这对用户来说可能造成一定的不便。比如做类似WebQQ的聊天窗口时，每当发或收一条消息滚动条总是在最上端，那么对用户来说总是需要手动的将滚动条移到最下才能看到新的消息，明显不爽。
废了这么多话，下面是将滚动条移到最下端的解决方法：
var d = targetPanel.body.dom;
d.scrollTop = d.scrollHeight - d.offsetHeight;
该方法是参考网上的，如果说得不对，欢迎指正。
使用gridpanel时我们有时需要给设置autoHeight:true，但这时如果表格的宽度大于它的容器的宽度，多余的内容就会被隐藏而不会出现横向的滚动条，费了老大劲儿才找到了解决办法，方法就是给gridpanel的option config添加如下属性：
Js代码
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），所以可能还有很多问题我没有发现。如果谁发现有什么问题，希望不吝赐教。
修改：
Js代码
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);
}
}
又发现了一个简单的方法比上边效果好多了，嘿嘿
推荐阅读
- 家乡的那条小河
- 每日一话（49）——一位清华教授在朋友圈给大学生的9条建议
- 人生是一条孤独又迷茫的路
- （七）谈条件
- 我在一条路上走了5年
- 那条灰色的人行道
- 无尾鱼与独脚鸟
- 墙角的小花
- 感赏15+投射
- Improve|Improve Nested Conditionals（优化嵌套的条件语句） 面对大量的if-else语句