当前位置: 代码迷 >> Web前端 >> GridPanel 自动增添滚动条
  详细解决方案

GridPanel 自动增添滚动条

热度:662   发布时间:2012-09-18 16:21:42.0
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<girdcount;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: '<%=map.get("011") %>'+' {0}' + '<%=map.get("012") %> '+'{1} '+'<%=map.get("013") %>'+'<%=map.get("014") %> '+'{2} '+'<%=map.get("015") %>',//显示第几条到几条记录,一共多少条
??????????????????? emptyMsg: '<%=map.get("016") %>'//没有记录
??????????????? })?
??????????? });

?

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

?????? (2)?autoHeight: true,

???

?