为什么的我的gridpanel不出现水平滚动条
我的grid放在一个window中,显示,但grid却没有出现水平滚动条导致有些列看不到,以下是grid代码:
var test = new Ext.grid.GridPanel({
id:'basegrid',
//plain : false,
height : 250,
frame:false,
border : true,// 出现边框
region : 'center',// 设定显示区域为中心,停靠在容器中心
layout : 'fit',// 表格内列内容填充满,按列头比例填充
width : 500,
autoScroll:true,
autoSizeColumns : true,//根据列内容自动适应列宽度
trackMouseOver:true,//鼠标移动时,高亮显示
sm : new Ext.grid.RowSelectionModel(),
cm : colM,
autoWidth : true,
viewConfig : {
sortAscText : '升序',
sortDescText : '降序',
columnsText : '显示列',
forceFit:false
},
renderTo:wuzhen,
loadMask : {
msg : '正在查询,请稍后...'
},
store : store,
autoExpandColumn : 'URL'
});
下面是window的代码:
var wuzhen = new Ext.Window({
id:'cmwap',
title : '业务类型查询',
width : 520,
height : 300,
//loadMask : true,
plain : true,
bodyStyle : 'padding:5px;',
buttonAlign : 'center',
layout : 'fit',
renderTo : Ext.getBody(),
items : [test],
buttons : [{
text : '关闭',
handler : function() {
wuzhen.close();
}
}]
});
下面是较完整的代码
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : url
}),
reader : new Ext.data.JsonReader({
root : 'result'
}, [{
name : 'CHARGINGID',mapping: 0
}, {
name : 'SERVICECODE',mapping: 1
}, {
name : 'UPLINKVOLUME',mapping: 2
}, {
name : 'DOWNLINKVOLUME',mapping: 3
}, {
name : 'USAGEDURATION',mapping: 4
}, {
name : 'URL',mapping: 5
}])
});
var colM = new Ext.grid.ColumnModel([// 定义表格显示列头
{
header : "计费标识",
sortable : true,
dataIndex : 'CHARGINGID',
width:45
}, {
header : "上行流量",
sortable : true,
dataIndex : 'UPLINKVOLUME',
width:35
}, {
header : "下行流量",
sortable : true,
dataIndex : 'DOWNLINKVOLUME',
width:35
}, {
header : "业务编码",
sortable : true,
dataIndex : 'SERVICECODE',
width:45
}, {
header : "使用时长",
sortable : true,
dataIndex : 'USAGEDURATION',
width:35
}, {
header : "使用时实际URL",
sortable : true,
dataIndex : 'URL',
width:60
}]);
var test = new Ext.grid.GridPanel({
id:'basegrid',
//plain : false,
height : 250,
frame:false,
border : true,// 出现边框
region : 'center',// 设定显示区域为中心,停靠在容器中心
layout : 'fit',// 表格内列内容填充满,按列头比例填充
width : 500,
autoScroll:true,
autoSizeColumns : true,//根据列内容自动适应列宽度
trackMouseOver:true,//鼠标移动时,高亮显示
sm : new Ext.grid.RowSelectionModel(),
cm : colM,
autoWidth : true,
viewConfig : {
sortAscText : '升序',
sortDescText : '降序',
columnsText : '显示列',
forceFit:false
},
renderTo:wuzhen,
loadMask : {
msg : '正在查询,请稍后...'
},
store : store,
autoExpandColumn : 'URL'
});
// ===================================================================
var wuzhen = new Ext.Window({
id:'cmwap',
title : '业务类型查询',
width : 520,
height : 300,
//loadMask : true,
plain : true,
bodyStyle : 'padding:5px;',
buttonAlign : 'center',
layout : 'fit',
renderTo : Ext.getBody(),
items : [test],
buttons : [{
text : '关闭',
handler : function() {
wuzhen.close();
}
}]
});
wuzhen.show();
store.load();
我在后面还贴了图,
请大家帮忙看看,先谢过了,在网上搜索下了,都说在gridview里面定义 forceFit:false 就可以了,但是加了这句后,老是报this.config[...].width为空或不是对象的错误,不知道为什么……,恳请大家帮助
你的水平 字段没超出所以没 滚动条!
你试下吧 columnModel 的列宽度 写大点就有了
还有可能是另外一个原因:
autoSizeColumns : true,//根据列内容自动适应列宽度
吧这句话去掉
原理同 autoHeight , 必须显示指定一个高度 才有垂直滚动条