100请教Ext GridPanel滚动条显示问题

artwl_cn 2010-03-15 11:08:37
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ExtPackage/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtPackage/ext-base.js"></script>
<script type="text/javascript" src="ExtPackage/ext-all.js"></script>
<script type="text/javascript" src="ExtPackage/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
function renderMotif(data, cell, record, rowIndex, columnIndex, store) {
if (columnIndex == 1) {
cell.attr = "style=text-align:left;";
return data;
}
else if (columnIndex == 2 || columnIndex == 10 || columnIndex == 11) {
cell.attr = "style=text-align:center;";
return Math.round(data * Math.pow(10, 0)) / Math.pow(10, 0);
}
else if (columnIndex == 9) {
cell.attr = "style=text-align:right;";
return Math.round(data * Math.pow(10, 4)) / Math.pow(10, 4);
}
else if (columnIndex == 3 || columnIndex == 4 || columnIndex == 6 || columnIndex == 8 || columnIndex == 12 || columnIndex == 13 || columnIndex == 14) {
cell.attr = "style=text-align:right;";
return Math.round(data * Math.pow(10, 2)) / Math.pow(10, 2);
}
else if (columnIndex == 5 || columnIndex == 7) {
cell.attr = "style=text-align:right;";
return Math.round(data * Math.pow(10, 1)) / Math.pow(10, 1);
}
}

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{ id: '井号', header: "<span style=font-weight:bolder;><center>井号</center>", sortable: true, width: 80, dataIndex: 'jh', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>总井数<br/>(口)</center></span>", sortable: true, width: 80, dataIndex: 'zjs', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>有效率<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'csyxl', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>经济<br/>有效率<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'jjyxl', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>增油<br/>(吨)</center></span>", sortable: true, width: 80, dataIndex: 'cszy', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>投入<br/>(元)</center></span>", sortable: true, width: 80, dataIndex: 'cstr', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>产出<br/>(吨)</center></span>", sortable: true, width: 80, dataIndex: 'cscc', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>收益<br/>(元)</center></span>", sortable: true, width: 80, dataIndex: 'cssy', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>投入<br/>产出比<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'trccb', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>有效期<br/>(天)</center></span>", sortable: true, width: 80, dataIndex: 'csyxq', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施投资<br/>回收期<br/>(天)</center></span>", sortable: true, width: 80, dataIndex: 'cstzhsq', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>增量单位<br/>操作成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'zldwczcb', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施单位<br/>操作成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'csdwczcb', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施单位<br/>变动成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'csdwbdcb', renderer: renderMotif }
]);

var data = [
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456]
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'jh' },
{ name: 'zjs' },
{ name: 'csyxl' },
{ name: 'jjyxl' },
{ name: 'cszy' },
{ name: 'cstr' },
{ name: 'cscc' },
{ name: 'cssy' },
{ name: 'trccb' },
{ name: 'csyxq' },
{ name: 'cstzhsq' },
{ name: 'zldwczcb' },
{ name: 'csdwczcb' },
{ name: 'csdwbdcb' }
])
});
store.load();

var grid = new Ext.grid.GridPanel({
autoHeight: true,
autoWidth:true,
autoScroll: true,
title: '<span style=font-weight:bolder;line-height:25px;font-size:18px;><center>“大剂量堵水”措施不同井类型对比表</center></span>',
loadMask: true,
renderTo: 'grid',
store: store,
cm: cm,
collapsible: true,
bbar: new Ext.PagingToolbar({
pageSize: 100,
store: store,
displayInfo: true,
displayMsg: '显示第{0}条到第{1}条记录,一共{2}条',
emptyMsg: '没有记录'
})
});

});
</script>
</head>
<body style=" text-align:center;">
<div id="Contain" style="text-align:left;width:1000px;">
<div id="grid" style="width:1000px;"></div>
</div>
</body>
</html>

效果如图:


本来有14列,但只显示了12列,横向滚运条显示不出来,请大家帮忙看看!!!
帮顶有分哦!
...全文
1844 29 打赏 收藏 转发到动态 举报
写回复
用AI写文章
29 条回复
切换为时间正序
请发表友善的回复…
发表回复
louiechong 2011-01-18
  • 打赏
  • 举报
回复
看来我的回答迟了些,但还是回了,方便以后遇到同样问题的人
在gridpanel里面加入下面代码:

view: new Ext.ux.grid.BufferView({
rowHeight: 25,
scrollDelay: true
})
artwl_cn 2010-03-15
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="ExtPackage/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtPackage/ext-base.js"></script>
<script type="text/javascript" src="ExtPackage/ext-all.js"></script>
<style type="text/css">
.x-grid3-viewport
{
overflow:auto;
}
</style>
<script type="text/javascript" src="ExtPackage/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
function renderMotif(data, cell, record, rowIndex, columnIndex, store) {
if (columnIndex == 1) {
cell.attr = "style=text-align:left;";
return data;
}
else if (columnIndex == 2 || columnIndex == 10 || columnIndex == 11) {
cell.attr = "style=text-align:center;";
return Math.round(data * Math.pow(10, 0)) / Math.pow(10, 0);
}
else if (columnIndex == 9) {
cell.attr = "style=text-align:right;";
return Math.round(data * Math.pow(10, 4)) / Math.pow(10, 4);
}
else if (columnIndex == 3 || columnIndex == 4 || columnIndex == 6 || columnIndex == 8 || columnIndex == 12 || columnIndex == 13 || columnIndex == 14) {
cell.attr = "style=text-align:right;";
return Math.round(data * Math.pow(10, 2)) / Math.pow(10, 2);
}
else if (columnIndex == 5 || columnIndex == 7) {
cell.attr = "style=text-align:right;";
return Math.round(data * Math.pow(10, 1)) / Math.pow(10, 1);
}
}

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{ id: '井号', header: "<span style=font-weight:bolder;><center>井号</center>", sortable: true, width: 80, dataIndex: 'jh', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>总井数<br/>(口)</center></span>", sortable: true, width: 80, dataIndex: 'zjs', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>有效率<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'csyxl', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>经济<br/>有效率<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'jjyxl', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>增油<br/>(吨)</center></span>", sortable: true, width: 80, dataIndex: 'cszy', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>投入<br/>(元)</center></span>", sortable: true, width: 80, dataIndex: 'cstr', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>产出<br/>(吨)</center></span>", sortable: true, width: 80, dataIndex: 'cscc', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>收益<br/>(元)</center></span>", sortable: true, width: 80, dataIndex: 'cssy', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>投入<br/>产出比<br/>(%)</center></span>", sortable: true, width: 80, dataIndex: 'trccb', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施<br/>有效期<br/>(天)</center></span>", sortable: true, width: 80, dataIndex: 'csyxq', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施投资<br/>回收期<br/>(天)</center></span>", sortable: true, width: 80, dataIndex: 'cstzhsq', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>增量单位<br/>操作成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'zldwczcb', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施单位<br/>操作成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'csdwczcb', renderer: renderMotif },
{ header: "<span style=font-weight:bolder;><center>措施单位<br/>变动成本<br/>(元/吨)</center></span>", sortable: true, width: 100, dataIndex: 'csdwbdcb', renderer: renderMotif }
]);

var data = [
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456],
['aaaa', 50, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 1.123456, 86, 45, 1.123456, 1.123456, 1.123456]
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'jh' },
{ name: 'zjs' },
{ name: 'csyxl' },
{ name: 'jjyxl' },
{ name: 'cszy' },
{ name: 'cstr' },
{ name: 'cscc' },
{ name: 'cssy' },
{ name: 'trccb' },
{ name: 'csyxq' },
{ name: 'cstzhsq' },
{ name: 'zldwczcb' },
{ name: 'csdwczcb' },
{ name: 'csdwbdcb' }
])
});
store.load();

var grid = new Ext.grid.GridPanel({
autoHeight: true,
autoWidth: true,
autoScroll: true,
title: '<span style=font-weight:bolder;line-height:25px;font-size:18px;><center>“大剂量堵水”措施不同井类型对比表</center></span>',
loadMask: true,
renderTo: 'grid',
store: store,
cm: cm,
collapsible: true,
bbar: new Ext.PagingToolbar({
pageSize: 100,
store: store,
displayInfo: true,
displayMsg: '显示第{0}条到第{1}条记录,一共{2}条',
emptyMsg: '没有记录'
})
});

});
</script>
</head>
<body style=" text-align:center;">
<div id="Contain" style="text-align:left;width:1000px;">
<div id="grid" style="width:1000px;"></div>
</div>
</body>
</html>



还是不行,不显示啊!
zhouxiaobo123 2010-03-15
  • 打赏
  • 举报
回复
注意要把

<style type="text/css">
.x-grid3-viewport
{
overflow:auto;
}
</style>

写在
<link rel="stylesheet" type="text/css" href="ExtPackage/resources/css/ext-all.css" />
这个下面
artwl_cn 2010-03-15
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 zhouxiaobo123 的回复:]
引用 7 楼 durongjian 的回复:

以上两位说的都不行!
求高手指点

我亲自试验的,可以啊
[/Quote]
能不能把你修改后的代码贴出来看一下,谢谢
asdujiayong 2010-03-15
  • 打赏
  • 举报
回复
是要滚动条呀,我那是forceFit ;
应当这样:将GridPanel放到panel里,panel设置width 和 autoScroll:true
zhouxiaobo123 2010-03-15
  • 打赏
  • 举报
回复
看图说话
zhouxiaobo123 2010-03-15
  • 打赏
  • 举报
回复
[Quote=引用 7 楼 durongjian 的回复:]

以上两位说的都不行!
求高手指点
[/Quote]
我亲自试验的,可以啊
artwl_cn 2010-03-15
  • 打赏
  • 举报
回复
以上两位说的都不行!
求高手指点
asdujiayong 2010-03-15
  • 打赏
  • 举报
回复
gridPanel 中:

viewConfig: {
forceFit:true
},
zhouxiaobo123 2010-03-15
  • 打赏
  • 举报
回复
加上这个

<style type="text/css">
.x-grid3-viewport
{
overflow:auto;
}
</style>
artwl_cn 2010-03-15
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 zhouxiaobo123 的回复:]
你是想要滚动条还是 想显示全部数据
[/Quote]
因为每列的宽度是固定的,所以想要横向滚动条
zhouxiaobo123 2010-03-15
  • 打赏
  • 举报
回复
你是想要滚动条还是 想显示全部数据
artwl_cn 2010-03-15
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 zhouxiaobo123 的回复:]
把autoWidth:true,
去掉看看
[/Quote]
还是不行,效果跟上面的截图一样
zhouxiaobo123 2010-03-15
  • 打赏
  • 举报
回复
把autoWidth:true,
去掉看看
郑萧001 2010-03-15
  • 打赏
  • 举报
回复
我认为主要原因是overflow-y是IE的特有属性,overflow是W3C的标准属性,在设置autoHeight的时候从ff上能看到overflow:visible,可能就是因为这个属性引起的
artwl_cn 2010-03-15
  • 打赏
  • 举报
回复
[Quote=引用 25 楼 bennes 的回复:]
悲剧了,我迟了五分钟
[/Quote]
不晚,谢谢你啊。问题随然解决了,但我还是不知道为什么
shan1119 2010-03-15
  • 打赏
  • 举报
回复
i dont konw.
just think think think think think
and try try try try try
郑萧001 2010-03-15
  • 打赏
  • 举报
回复
悲剧了,我迟了五分钟
郑萧001 2010-03-15
  • 打赏
  • 举报
回复
只要把autoHeight:auto去掉就可以了
artwl_cn 2010-03-15
  • 打赏
  • 举报
回复
[Quote=引用 21 楼 shan1119 的回复:]
autoHeight: true,
autoWidth: true,
-------->
height: 600,
width: 1000,
[/Quote]
问题解决了,马上结贴给分,能说说是什么原因吗?
加载更多回复(9)

87,904

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧