extjs中滚动条属性_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

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: ''+' {0}' + ' '+'{1} '+''+' '+'{2} '+'',//显示第几条到几条记录，一共多少条

emptyMsg: ''//没有记录

})

});

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

(2) autoHeight: true,

大小: 42.8 KB

分享到：

2011-08-25 18:18

浏览 9289

评论