EXTJS4.2网格分页
EXTJS4.2网格分页
提问于 2016-02-18 16:23:12
我有一个带有两个锁定的columns.Now的ext js4.2网格，我想在我的网格中添加分页功能，我希望它看起来像链接http://docs.sencha.com/extjs/4.2.4/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#progress-bar-pager上给出的进度条寻呼机，现在我如何使用分页功能将网格转换为进度条寻呼机网格。我目前的代码是
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var field=[];
var columnList = [];
var counter = {"levels":
[
{"name":"class","samples":[
{"name":"1660SH_3","features":[{"count":8,"name":"Bacteroidia"},{"count":9,"name":"Bacteroidiaa"}]},
{"name":"1660SH_4","features":[{"count":5,"name":"Bacteroidia"},{"count":6,"name":"Bacteroidiaa"}]}]},
]};
columnList.push({header: "Sample v/s Feature", dataIndex : "Sample v/s Feature",width:0.1*Ext.getBody().getViewSize().width,columnLines: true,locked:true});
field.push("Sample v/s Feature");
for(var p=0;p<Object.keys(counter.levels[0].samples).length;p++)
{
columnList.push({header: counter.levels[0].samples[p].name, dataIndex : counter.levels[0].samples[p].name,flex:1,columnLines: true});
field.push(counter.levels[0].samples[p].name);
}
var Grid7Store = new Ext.data.ArrayStore({
fields: field,
data: [] });
if(counter.levels[0].name=='class')
{
var classTable= Ext.create('Ext.grid.Panel',{
style: 'border: solid Blue 1px',
id:'family',
renderTo:Ext.getBody(),
store :Grid7Store,
columns : columnList,
columnLines: true,
width:Ext.getBody().getViewSize().width,
height: Ext.getBody().getViewSize().height
});
for(var p=0;p<Object.keys(counter.levels[0].samples[0].features).length;p++)
{
var s={};
s["Sample v/s Feature"]='<b>'+counter.levels[0].samples[0].features[p].name+'</b>';
for(var j=0; j< Object.keys(counter.levels[0].samples).length ;j++)
{
s[counter.levels[0].samples[j].name]=counter.levels[0].samples[j].features[p].count;
}
Grid7Store.add(s);
}
}
});
</script>
</head>
<body>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-18 18:08:48
您的代码缺少了原始示例代码中的以下关键部分：
Ext.require([
'Ext.ux.ProgressBarPager'
]);和
plugins: new Ext.ux.ProgressBarPager()和
proxy: {
type: 'memory',
enablePaging: true,
data: myData
reader: {
type: 'array'
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35486909
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号