EXTJS 4.2网格的分页
[英]Pagination for EXTJS 4.2 grid
问题描述
我有一个带有两个锁定列的ext js 4.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 个解决方案
解决方案1
1 已采纳 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'
}
}
EXTJS 4.2网格问题的分页
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.