EXTJS 4.2 网格的分页
Posted
技术标签:
【中文标题】EXTJS 4.2 网格的分页【英文标题】：Pagination for EXTJS 4.2 grid 【发布时间】：2016-02-18 16:23:12 【问题描述】：我有一个带有两个锁定列的 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>
【问题讨论】：
您是否尝试从链接到的示例中复制相关部分？像xtype: 'pagingtoolbar' 和 pageSize: 10 以及其他所有听起来可能与分页相关的东西？
@Alexander 我已经编辑了我的代码并尝试了一些，但它没有工作....
【参考方案1】：
您的代码缺少原始示例代码中的以下关键部分：
Ext.require([
'Ext.ux.ProgressBarPager'
]);
和
plugins: new Ext.ux.ProgressBarPager()
和
proxy:
type: 'memory',
enablePaging: true,
data: myData
reader:
type: 'array'
I have made a fiddle.
【讨论】：
@Alexander....我已经编辑了我的代码....我使用 EXTJS 4.2 .....我的这个代码工作得非常好并且具有分页功能但现在问题是 - -->如果我动态地将行添加到我的商店怎么办？...那么这不起作用？........我从服务器端以 JSON 格式获取数据，然后我在 extjs 上解析该 json .. ..然后使用该JSON我使用store.add将行添加到网格存储........现在我将如何获取存储的数据属性和代理的数据属性... ? ...现在该怎么做....因为我现在不使用 mydata 变量，而是使用 store.add 直接将行从 json 添加到存储中 ...我已经编辑了我的代码....如何为这样的网格实现分页，其中使用 JSON 动态添加存储数据...计数器变量以我得到的 JSON 格式存储数据从java（服务器）端？以上是关于EXTJS 4.2 网格的分页的主要内容，如果未能解决你的问题，请参考以下文章