分页不工作的 EXTJS 4 网格——商店代理问题
EXTJS 4 grid with pagination not working---issues with store proxy
这个进度条寻呼机 EXTJS 网格在 EXTJS5 中工作，但在 EXTJS 中不工作4.So，我怎样才能让它在 EXTJS 4 中工作。
这是一个简单的带有分页的 extJS 4 网格 support.I 希望我的 EXTJS 4 网格支持 pagination.How 来制作我的带有分页的 EXTJS 4 网格？
我当前的代码是
<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="FileSaver.js"></script>
<script type="text/javascript" src="jszip.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.define('Ext.ux.ProgressBarPager', {
requires: ['Ext.ProgressBar'],
/**
* @cfg {Number} width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 200,
/**
* @cfg {String} defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
/**
* @cfg {Object} defaultAnimCfg
* <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
*/
defaultAnimCfg : {
duration: 1000,
/*easing: 'bounceOut' */
},
/**
* Creates new ProgressBarPager.
* @param {Object} config Configuration options
*/
constructor : function(config) {
if (config) {
Ext.apply(this, config);
}
},
//public
init : function (parent) {
var displayItem;
if (parent.displayInfo) {
this.parent = parent;
displayItem = parent.child("#displayItem");
if (displayItem) {
parent.remove(displayItem, true);
}
this.progressBar = Ext.create('Ext.ProgressBar', {
text : this.defaultText,
width : this.width,
animate : this.defaultAnimCfg,
style: {
cursor: 'pointer'
},
listeners: {
el: {
scope: this,
click: this.handleProgressBarClick
}
}
});
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
Ext.apply(parent, this.parentOverrides);
}
},
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]- box.x,
pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
parent.store.loadPage(newPage);
},
// private, overriddes
parentOverrides : {
// private
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
var count = this.store.getCount(),
pageData = this.getPageData(),
message = count === 0 ?
this.emptyMsg :
Ext.String.format(
this.displayMsg,
pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
),
percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
}
}
}
});
Ext.onReady(function() {
function JSONToCSVConvertor(counter)
{
var zip = new JSZip();
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var CSV = '';
var row1="Sample v/s Feature"+',';
for(var p=0;p<Object.keys(counter.levels[i].samples).length;p++)
{
row1 += counter.levels[i].samples[p].name + ',';
}
row1.slice(0, row1.length - 1);
CSV += row1 + '\r\n';
var row2="";
for(var k=0;k<Object.keys(counter.levels[i].samples[0].features).length;k++)
{
row2 +=counter.levels[i].samples[0].features[k].name + ',';
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
row2 +=counter.levels[i].samples[j].features[k].count+ ',';
}
row2 +='\n';
row2.slice(0, row2.length - 1);
}
CSV += row2 + '\r\n\n';
var fileName = "";
var title=counter.levels[i].name;
fileName += title.replace(/ /g,"_");
zip.file(title+".csv", CSV);
/* var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);*/
}
/* var content = zip.generate({type:"blob"});
saveAs(content, "example.zip");*/
content = zip.generate();
location.href="data:application/zip;base64," + content;
}
var familyTable;
var classTable;
var orderTable;
var phylumTable;
var superkingdomTable;
var genusTable;
var panelHeader;
var counter = {"workflowName":"Workflow-1","levels":[{"name":"family","samples":[{"name":"1660SH_3","features":[{"count":3,"name":"Bacteroidaceae"}],"bacteriaIdList":["Bacteroidaceae"]},{"name":"1660SH_4","features":[{"count":3,"name":"Bacteroidaceae"}],"bacteriaIdList":["Bacteroidaceae"]}]},{"name":"genus","samples":[{
"name": "1660SH_3",
"features": [{
"count": 8,
"name": "Bacteroidia"
}, {
"count": 9,
"name": "Bacteroidiaa"
},
{
"count": 10,
"name": "Bacteroidiab"
},
{
"count": 11,
"name": "Bacteroidiac"
}]
}, {
"name": "1660SH_4",
"features": [{
"count": 5,
"name": "Bacteroidia"
}, {
"count": 6,
"name": "Bacteroidiaa"
},
{
"count": 7,
"name": "Bacteroidiab"
},
{
"count": 8,
"name": "Bacteroidiac"
}]
}]},{"name":"class","samples":[{"name":"1660SH_3","features":[{"count":8,"name":"Bacteroidia"}],"bacteriaIdList":["Bacteroidia"]},{"name":"1660SH_4","features":[{"count":8,"name":"Bacteroidia"}],"bacteriaIdList":["Bacteroidia"]}]},{"name":"order","samples":[{"name":"1660SH_3","features":[{"count":3,"name":"Bacteroidales"}],"bacteriaIdList":["Bacteroidales"]},{"name":"1660SH_4","features":[{"count":3,"name":"Bacteroidales"}],"bacteriaIdList":["Bacteroidales"]}]},{"name":"phylum","samples":[{"name":"1660SH_3","features":[{"count":1,"name":"Deinococcus-Thermus"},{"count":8,"name":"Bacteroidetes"}],"bacteriaIdList":["Bacteroidetes","Deinococcus-Thermus"]},{"name":"1660SH_4","features":[{"count":1,"name":"Deinococcus-Thermus"},{"count":8,"name":"Bacteroidetes"}],"bacteriaIdList":["Bacteroidetes","Deinococcus-Thermus"]}]},{"name":"superkingdom","samples":[{"name":"1660SH_3","features":[{"count":9,"name":"Bacteria"}],"bacteriaIdList":["Bacteria"]},{"name":"1660SH_4","features":[{"count":9,"name":"Bacteria"}],"bacteriaIdList":["Bacteria"]}]}],"projectId":"1455523890090","isBinstat":false,"executionName":"exe-2","projectName":"Project-1"};
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var field=[];
var columnList = [];
var minwidth=0.05*Ext.getBody().getViewSize().width;
var noofitems=Object.keys(counter.levels[i].samples).length;
var actualwidth=(0.54*Ext.getBody().getViewSize().width)/noofitems;
if(minwidth>actualwidth)
{
actualwidth=minwidth;
}
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[i].samples).length;p++)
{
columnList.push({
header: counter.levels[i].samples[p].name,
dataIndex : counter.levels[i].samples[p].name,
width:actualwidth,
columnLines: true});
field.push(counter.levels[i].samples[p].name);
}
var mydata=[];
for(var p=0;p<Object.keys(counter.levels[i].samples[0].features).length;p++)
{
var s=[];
s["Sample v/s Feature"]='<b>'+counter.levels[i].samples[0].features[p].name+'</b>';
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
s[counter.levels[i].samples[j].name]=counter.levels[i].samples[j].features[p].count;
}
mydata.push(s);
}
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 2,
fields: field,
data: [] ,
data: {
count:mydata.length,
data:mydata
},
proxy:{
type:"memory",
enablePaging: true,
data:mydata,
reader: {
type: 'json',
root: 'data',
}
}
});
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: 2,
}
});
var table = Ext.create('Ext.grid.Panel', {
hidden:true,
id : counter.levels[i].name+'_ID',
store: store,
columns: columnList,
columnLines: true,
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.5*Ext.getBody().getViewSize().height,
bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager(),
listeners: {
afterrender: {
fn: function(component) {
component.down("#refresh").hide();
}
}
}
},
});
if(counter.levels[i].name=='family')
{
/*var panelHeader='<center>Family</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
familyTable = table;
}
else if(counter.levels[i].name=='order')
{ /*var panelHeader='<center>Order</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
orderTable=table;
}
else if(counter.levels[i].name=='phylum')
{
/*var panelHeader='<center>Phylum</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader);*/
phylumTable=table;
}
else if(counter.levels[i].name=='class')
{
/*var panelHeader='<center>Class</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
classTable=table;
}
else if(counter.levels[i].name=='genus')
{
/* var panelHeader='<center>Genus</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
genusTable=table;
}
else if(counter.levels[i].name=='superkingdom')
{
/* var panelHeader='<center>Superkingdom</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader);*/
superkingdomTable=table;
}
}
Ext.getCmp('genus_ID').show();
var panel1= {
xtype:'panel',
layout:'vbox',
width:0.16*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
title:'<center>Levels</center>',
items:[{
xtype:'button',
text:'Genus',
id:'button1',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Genus</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').show();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Family',
id:'button2',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Family</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').show();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
}
,
{
xtype:'button',
text:'Class',
id:'button3',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Class</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').show();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Order',
id:'button4',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Order</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').show();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Phylum',
id:'button5',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Phylum</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').show();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Superkingdom',
id:'button6',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>SuperKingdom</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').show();
}
},
{
xtype:'button',
text:'Export to CSV',
id:'button7',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
JSONToCSVConvertor(counter, 'GeMS_Report', true);
}
}
],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var tablepanel= {
title:'<center>Genus</center>',
id:'tablepanel',
style: 'border: solid Blue 1px',
xtype:'panel',
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.538*Ext.getBody().getViewSize().height,
layout:'vbox',
closable:true,
closeAction:'hide',
items:[genusTable,familyTable,classTable,orderTable,phylumTable,superkingdomTable],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var sidepanel={
header:false,
id:'sidepanel',
bodyStyle: "background-image:url(http://png.clipart.me/graphics/thumbs/120/seamless-geometric-checked-texture-vector-art_120465088.jpg);padding: 120px;",
width:0.84*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
items:[tablepanel]
}
var cumulative = Ext.create('Ext.panel.Panel', {
id:'main',
title: '<center>Cumulative Report</center>',
layout:'hbox',
width:Ext.getBody().getViewSize().width,
height: 0.965*Ext.getBody().getViewSize().height,
renderTo: Ext.getBody(),
items: [panel1,sidepanel],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
});
});
</script>
</head>
<body>
</body>
</html>
据我所知，您的数据和存储必须如下所示：这里是 fillde linki
var myData = [
count:5,
data:[
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
]
];
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 5,
buffered: true,
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
}
});
我现在遇到了同样的问题。你有2个解决方案。第一个是使用网格的 grid.reconfigure() 方法重新配置网格或删除旧的并使用新商店、新总计 属性、新数据创建新的，第二个有点难以解释考虑到我的英语知识，但我会尝试。首先，您不能手动解析 json 并且您不应该使用 add 方法将其添加到存储中，相反，存储必须始终由其代理设置加载。和重要的部分。每个新页面响应的总数 属性 必须比页面大小多 1 ...好吧，这比我想象的更难解释。这是例子
商店代理配置：
Ext.define('ExtMVC.store.myStore', {
extend: 'Ext.data.Store',
storeId: 'MyStore',
pageSize : 100,
autoLoad:true,
proxy: {
type: 'ajax',
url: 'ajax/?getData',
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
},
fields: [{
name: 'company'
}, {
name: 'price'
}, {
name: 'change'
}, {
name: 'pctChange'
}, {
name: 'lastChange'
}]
});
服务器配置：示例在php
<?php
session_name("test");
session_start();
$page = $_REQUEST["page"];
$start = $_REQUEST["start"];
$data = [];
for ($i=0; $i < $start+100; $i++) {
$data[]=["ipsa".$i, "ut".$i, "dignissimos".$i, "recusandae".$i, "quae".$i];
}
$_SESSION["start"] = $start+1;
echo json_encode(["count"=>$start+101,"data"=>$data]);
?>
我已经更改了您的代码以使用分页。重要更改：在创建商店之前生成数据以将其添加到代码中而不是通过方法 "add"。我已将 reader 添加到 reader 计数（分页插件使用的记录总数）。还添加了 dockedItems pagingtoolbar 以实际使用分页工具栏，这是代码，它必须有效
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);
}
if (counter.levels[0].name == 'class') {
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;
}
}
var Grid7Store = new Ext.data.ArrayStore({
fields: field,
data: {
count:s.length,
data:s
},
proxy:{
type:"memory",
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
}
});
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,
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: Grid7Store
}
]
});
}
});
这个进度条寻呼机 EXTJS 网格在 EXTJS5 中工作，但在 EXTJS 中不工作4.So，我怎样才能让它在 EXTJS 4 中工作。 这是一个简单的带有分页的 extJS 4 网格 support.I 希望我的 EXTJS 4 网格支持 pagination.How 来制作我的带有分页的 EXTJS 4 网格？ 我当前的代码是
<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="FileSaver.js"></script>
<script type="text/javascript" src="jszip.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.define('Ext.ux.ProgressBarPager', {
requires: ['Ext.ProgressBar'],
/**
* @cfg {Number} width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 200,
/**
* @cfg {String} defaultText
* <p>The text to display while the store is loading. Default is 'Loading...'</p>
*/
defaultText : 'Loading...',
/**
* @cfg {Object} defaultAnimCfg
* <p>A {@link Ext.fx.Anim Ext.fx.Anim} configuration object.</p>
*/
defaultAnimCfg : {
duration: 1000,
/*easing: 'bounceOut' */
},
/**
* Creates new ProgressBarPager.
* @param {Object} config Configuration options
*/
constructor : function(config) {
if (config) {
Ext.apply(this, config);
}
},
//public
init : function (parent) {
var displayItem;
if (parent.displayInfo) {
this.parent = parent;
displayItem = parent.child("#displayItem");
if (displayItem) {
parent.remove(displayItem, true);
}
this.progressBar = Ext.create('Ext.ProgressBar', {
text : this.defaultText,
width : this.width,
animate : this.defaultAnimCfg,
style: {
cursor: 'pointer'
},
listeners: {
el: {
scope: this,
click: this.handleProgressBarClick
}
}
});
parent.displayItem = this.progressBar;
parent.add(parent.displayItem);
Ext.apply(parent, this.parentOverrides);
}
},
// private
// This method handles the click for the progress bar
handleProgressBarClick : function(e){
var parent = this.parent,
displayItem = parent.displayItem,
box = this.progressBar.getBox(),
xy = e.getXY(),
position = xy[0]- box.x,
pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize),
newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1);
parent.store.loadPage(newPage);
},
// private, overriddes
parentOverrides : {
// private
// This method updates the information via the progress bar.
updateInfo : function(){
if(this.displayItem){
var count = this.store.getCount(),
pageData = this.getPageData(),
message = count === 0 ?
this.emptyMsg :
Ext.String.format(
this.displayMsg,
pageData.fromRecord, pageData.toRecord, this.store.getTotalCount()
),
percentage = pageData.pageCount > 0 ? (pageData.currentPage / pageData.pageCount) : 0;
this.displayItem.updateProgress(percentage, message, this.animate || this.defaultAnimConfig);
}
}
}
});
Ext.onReady(function() {
function JSONToCSVConvertor(counter)
{
var zip = new JSZip();
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var CSV = '';
var row1="Sample v/s Feature"+',';
for(var p=0;p<Object.keys(counter.levels[i].samples).length;p++)
{
row1 += counter.levels[i].samples[p].name + ',';
}
row1.slice(0, row1.length - 1);
CSV += row1 + '\r\n';
var row2="";
for(var k=0;k<Object.keys(counter.levels[i].samples[0].features).length;k++)
{
row2 +=counter.levels[i].samples[0].features[k].name + ',';
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
row2 +=counter.levels[i].samples[j].features[k].count+ ',';
}
row2 +='\n';
row2.slice(0, row2.length - 1);
}
CSV += row2 + '\r\n\n';
var fileName = "";
var title=counter.levels[i].name;
fileName += title.replace(/ /g,"_");
zip.file(title+".csv", CSV);
/* var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
var link = document.createElement("a");
link.href = uri;
link.style = "visibility:hidden";
link.download = fileName + ".csv";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);*/
}
/* var content = zip.generate({type:"blob"});
saveAs(content, "example.zip");*/
content = zip.generate();
location.href="data:application/zip;base64," + content;
}
var familyTable;
var classTable;
var orderTable;
var phylumTable;
var superkingdomTable;
var genusTable;
var panelHeader;
var counter = {"workflowName":"Workflow-1","levels":[{"name":"family","samples":[{"name":"1660SH_3","features":[{"count":3,"name":"Bacteroidaceae"}],"bacteriaIdList":["Bacteroidaceae"]},{"name":"1660SH_4","features":[{"count":3,"name":"Bacteroidaceae"}],"bacteriaIdList":["Bacteroidaceae"]}]},{"name":"genus","samples":[{
"name": "1660SH_3",
"features": [{
"count": 8,
"name": "Bacteroidia"
}, {
"count": 9,
"name": "Bacteroidiaa"
},
{
"count": 10,
"name": "Bacteroidiab"
},
{
"count": 11,
"name": "Bacteroidiac"
}]
}, {
"name": "1660SH_4",
"features": [{
"count": 5,
"name": "Bacteroidia"
}, {
"count": 6,
"name": "Bacteroidiaa"
},
{
"count": 7,
"name": "Bacteroidiab"
},
{
"count": 8,
"name": "Bacteroidiac"
}]
}]},{"name":"class","samples":[{"name":"1660SH_3","features":[{"count":8,"name":"Bacteroidia"}],"bacteriaIdList":["Bacteroidia"]},{"name":"1660SH_4","features":[{"count":8,"name":"Bacteroidia"}],"bacteriaIdList":["Bacteroidia"]}]},{"name":"order","samples":[{"name":"1660SH_3","features":[{"count":3,"name":"Bacteroidales"}],"bacteriaIdList":["Bacteroidales"]},{"name":"1660SH_4","features":[{"count":3,"name":"Bacteroidales"}],"bacteriaIdList":["Bacteroidales"]}]},{"name":"phylum","samples":[{"name":"1660SH_3","features":[{"count":1,"name":"Deinococcus-Thermus"},{"count":8,"name":"Bacteroidetes"}],"bacteriaIdList":["Bacteroidetes","Deinococcus-Thermus"]},{"name":"1660SH_4","features":[{"count":1,"name":"Deinococcus-Thermus"},{"count":8,"name":"Bacteroidetes"}],"bacteriaIdList":["Bacteroidetes","Deinococcus-Thermus"]}]},{"name":"superkingdom","samples":[{"name":"1660SH_3","features":[{"count":9,"name":"Bacteria"}],"bacteriaIdList":["Bacteria"]},{"name":"1660SH_4","features":[{"count":9,"name":"Bacteria"}],"bacteriaIdList":["Bacteria"]}]}],"projectId":"1455523890090","isBinstat":false,"executionName":"exe-2","projectName":"Project-1"};
for(var i=0; i< Object.keys(counter.levels).length ;i++)
{
var field=[];
var columnList = [];
var minwidth=0.05*Ext.getBody().getViewSize().width;
var noofitems=Object.keys(counter.levels[i].samples).length;
var actualwidth=(0.54*Ext.getBody().getViewSize().width)/noofitems;
if(minwidth>actualwidth)
{
actualwidth=minwidth;
}
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[i].samples).length;p++)
{
columnList.push({
header: counter.levels[i].samples[p].name,
dataIndex : counter.levels[i].samples[p].name,
width:actualwidth,
columnLines: true});
field.push(counter.levels[i].samples[p].name);
}
var mydata=[];
for(var p=0;p<Object.keys(counter.levels[i].samples[0].features).length;p++)
{
var s=[];
s["Sample v/s Feature"]='<b>'+counter.levels[i].samples[0].features[p].name+'</b>';
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
s[counter.levels[i].samples[j].name]=counter.levels[i].samples[j].features[p].count;
}
mydata.push(s);
}
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 2,
fields: field,
data: [] ,
data: {
count:mydata.length,
data:mydata
},
proxy:{
type:"memory",
enablePaging: true,
data:mydata,
reader: {
type: 'json',
root: 'data',
}
}
});
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: 2,
}
});
var table = Ext.create('Ext.grid.Panel', {
hidden:true,
id : counter.levels[i].name+'_ID',
store: store,
columns: columnList,
columnLines: true,
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.5*Ext.getBody().getViewSize().height,
bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager(),
listeners: {
afterrender: {
fn: function(component) {
component.down("#refresh").hide();
}
}
}
},
});
if(counter.levels[i].name=='family')
{
/*var panelHeader='<center>Family</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
familyTable = table;
}
else if(counter.levels[i].name=='order')
{ /*var panelHeader='<center>Order</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
orderTable=table;
}
else if(counter.levels[i].name=='phylum')
{
/*var panelHeader='<center>Phylum</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader);*/
phylumTable=table;
}
else if(counter.levels[i].name=='class')
{
/*var panelHeader='<center>Class</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
classTable=table;
}
else if(counter.levels[i].name=='genus')
{
/* var panelHeader='<center>Genus</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader); */
genusTable=table;
}
else if(counter.levels[i].name=='superkingdom')
{
/* var panelHeader='<center>Superkingdom</center>';
Ext.getCmp(counter.levels[i].name+'_ID').setTitle(panelHeader);*/
superkingdomTable=table;
}
}
Ext.getCmp('genus_ID').show();
var panel1= {
xtype:'panel',
layout:'vbox',
width:0.16*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
title:'<center>Levels</center>',
items:[{
xtype:'button',
text:'Genus',
id:'button1',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Genus</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').show();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Family',
id:'button2',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Family</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').show();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
}
,
{
xtype:'button',
text:'Class',
id:'button3',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Class</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').show();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Order',
id:'button4',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Order</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').show();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Phylum',
id:'button5',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>Phylum</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').show();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').hide();
}
},
{
xtype:'button',
text:'Superkingdom',
id:'button6',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
Ext.getCmp('tablepanel').setTitle('<center>SuperKingdom</center>');
button.up('#main').down('#tablepanel').show();
button.up('#main').down('#genus_ID').hide();
button.up('#main').down('#family_ID').hide();
button.up('#main').down('#class_ID').hide();
button.up('#main').down('#order_ID').hide();
button.up('#main').down('#phylum_ID').hide();
button.up('#main').down('#superkingdom_ID').show();
}
},
{
xtype:'button',
text:'Export to CSV',
id:'button7',
height:0.05*Ext.getBody().getViewSize().height,
width:0.16*Ext.getBody().getViewSize().width,
handler:function(button)
{
JSONToCSVConvertor(counter, 'GeMS_Report', true);
}
}
],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var tablepanel= {
title:'<center>Genus</center>',
id:'tablepanel',
style: 'border: solid Blue 1px',
xtype:'panel',
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.538*Ext.getBody().getViewSize().height,
layout:'vbox',
closable:true,
closeAction:'hide',
items:[genusTable,familyTable,classTable,orderTable,phylumTable,superkingdomTable],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
};
var sidepanel={
header:false,
id:'sidepanel',
bodyStyle: "background-image:url(http://png.clipart.me/graphics/thumbs/120/seamless-geometric-checked-texture-vector-art_120465088.jpg);padding: 120px;",
width:0.84*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
items:[tablepanel]
}
var cumulative = Ext.create('Ext.panel.Panel', {
id:'main',
title: '<center>Cumulative Report</center>',
layout:'hbox',
width:Ext.getBody().getViewSize().width,
height: 0.965*Ext.getBody().getViewSize().height,
renderTo: Ext.getBody(),
items: [panel1,sidepanel],
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(0.038*Ext.getBody().getViewSize().height);
}
}
});
});
</script>
</head>
<body>
</body>
</html>
据我所知，您的数据和存储必须如下所示：这里是 fillde linki
var myData = [
count:5,
data:[
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'],
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'],
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'],
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'],
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'],
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'],
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'],
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'],
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'],
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'],
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'],
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'],
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'],
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'],
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'],
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'],
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
]
];
var store = Ext.create('Ext.data.ArrayStore', {
autoLoad: false,
pageSize : 5,
buffered: true,
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
],
data: myData,
proxy: {
type: 'memory',
enablePaging: true,
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
}
});
我现在遇到了同样的问题。你有2个解决方案。第一个是使用网格的 grid.reconfigure() 方法重新配置网格或删除旧的并使用新商店、新总计 属性、新数据创建新的，第二个有点难以解释考虑到我的英语知识，但我会尝试。首先，您不能手动解析 json 并且您不应该使用 add 方法将其添加到存储中，相反，存储必须始终由其代理设置加载。和重要的部分。每个新页面响应的总数 属性 必须比页面大小多 1 ...好吧，这比我想象的更难解释。这是例子
商店代理配置：
Ext.define('ExtMVC.store.myStore', {
extend: 'Ext.data.Store',
storeId: 'MyStore',
pageSize : 100,
autoLoad:true,
proxy: {
type: 'ajax',
url: 'ajax/?getData',
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
},
fields: [{
name: 'company'
}, {
name: 'price'
}, {
name: 'change'
}, {
name: 'pctChange'
}, {
name: 'lastChange'
}]
});
服务器配置：示例在php
<?php
session_name("test");
session_start();
$page = $_REQUEST["page"];
$start = $_REQUEST["start"];
$data = [];
for ($i=0; $i < $start+100; $i++) {
$data[]=["ipsa".$i, "ut".$i, "dignissimos".$i, "recusandae".$i, "quae".$i];
}
$_SESSION["start"] = $start+1;
echo json_encode(["count"=>$start+101,"data"=>$data]);
?>
我已经更改了您的代码以使用分页。重要更改：在创建商店之前生成数据以将其添加到代码中而不是通过方法 "add"。我已将 reader 添加到 reader 计数（分页插件使用的记录总数）。还添加了 dockedItems pagingtoolbar 以实际使用分页工具栏，这是代码，它必须有效
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);
}
if (counter.levels[0].name == 'class') {
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;
}
}
var Grid7Store = new Ext.data.ArrayStore({
fields: field,
data: {
count:s.length,
data:s
},
proxy:{
type:"memory",
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
}
});
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,
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
store: Grid7Store
}
]
});
}
});