This progress bar pager EXTJS grid works in EXTJS5 but not in EXTJS 4.So,how can i make it work in EXTJS 4. This is a simple extJS 4 grid with pagination support.I want my EXTJS 4 grid to support pagination.How to make my EXTJS 4 grid with pagination? My current code is
<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>
I have changed your code to use paging. important changes: generate data (s) before creating store to add it in code not by method "add". I have added reader to reader count (total count of records used by paging plugin). also addeddockedItems pagingtoolbar to actually use paging toolbar and here is code, it must work
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
}
]
});
}
});