EXTJS 4.2分页问题
我有一个网格，其中使用xtype实现分页：＆＃39; pagingtoolbar＆＃39;。当我包含
bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: store,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager(),
listeners: {
afterrender: {
fn: function(component) {
component.down("#refresh").hide();
}
}
}
}
在我的代码中。我的网格就像这样
但是当我评论/排除分页工具栏代码时，我的网格按照
的要求，但没有分页....如何让分页为我的网格工作？
我的当前代码是
Ext.define('Ext.ux.ProgressBarPager', {
requires: ['Ext.ProgressBar'],
/**
* @cfg {Number} width
* <p>The default progress bar width. Default is 225.</p>
*/
width : 225,
/**
* @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);
}
}
}
});
function getcumulative()
{
var familyTable;
var classTable;
var orderTable;
var phylumTable;
var superkingdomTable;
var genusTable;
var counter = JSON.parse(reportData);
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({
xtype:'gridcolumn',
text: "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({
xtype:'gridcolumn',
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.push('<b>'+counter.levels[i].samples[0].features[p].name+'<b>');
for(var j=0; j< Object.keys(counter.levels[i].samples).length ;j++)
{
s.push(counter.levels[i].samples[j].features[p].count);
}
mydata.push(s);
}
var Store1 = new Ext.create('Ext.data.Store', {
autoLoad: false,
pageSize : 2,
fields: field,
data: {
count:mydata.length,
data:mydata
},
proxy:{
type:"memory",
enablePaging: true,
data:mydata,
reader: {
type: 'array',
root: 'data',
totalProperty: 'count'
}
}
});
/*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: Store1,
columns: columnList,
columnLines: true,
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.5*Ext.getBody().getViewSize().height,
/* bbar: {
xtype: 'pagingtoolbar',
pageSize: 2,
store: Store1,
displayInfo: true,
plugins: new Ext.ux.ProgressBarPager(),
listeners: {
afterrender: {
fn: function(component) {
component.down("#refresh").hide();
}
}
}
}*/
});
if(counter.levels[i].name=='family')
{
familyTable = table;
}
else if(counter.levels[i].name=='order')
{
orderTable=table;
}
else if(counter.levels[i].name=='phylum')
{
phylumTable=table;
}
else if(counter.levels[i].name=='class')
{
classTable=table;
}
else if(counter.levels[i].name=='genus')
{
genusTable=table;
}
else if(counter.levels[i].name=='superkingdom')
{
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').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').show();
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= {
xtype:'panel',
title:'<center>Genus</center>',
id:'tablepanel',
style: 'border: solid Blue 1px',
width: 0.64*Ext.getBody().getViewSize().width,
height: 0.538*Ext.getBody().getViewSize().height,
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={
xtype:'panel',
header:false,
id:'sidepanel',
bodyStyle: "padding: 120px;",
width:0.84*Ext.getBody().getViewSize().width,
height: 0.927*Ext.getBody().getViewSize().height,
items:[tablepanel]
}
var cumulative = {
xtype:'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);
}
}
};
return cumulative;
}
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, "Cumulative_Levels_Report.zip");
/*var content = zip.generate({type:"base64"});
window.location.href="data:application/zip;base64," + content;*/
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？