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中如何使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);
}
}

又發現了一個簡單的方法比上邊效果好多了，嘿嘿