0
我遇到分頁工具欄的問題。 我想讓用戶選擇設置每個頁面的結果數量(限制)。我有一個下拉列表。 我已經初始化了我的頁面大小爲20. 當我從下拉菜單中設置我的限制(例如50)時,n假設我得到了90個結果,所以在第一頁上顯示的是1-50結果的正確結果,顯示21-70而不是51-90的結果。 因此,我無法根據下拉菜單設置的限制重新設置頁面大小。開始總是選取初始化的頁面大小。 有什麼建議嗎? 我附上我的代碼...Extjs分頁工具欄:無法設置開始
linkCheckerUI = {
pageSize: 20,
test:null,
getPanel: function(config) {
var fields = ["path","jcrObject","type","URL","response"];
var rootpath = null;
var term= null;
var end=null;
var internal_links=null;
var external_links=null;
var smart_links=null;
var videoid_links=null;
this.store = new CQ.Ext.data.Store({
proxy: new CQ.Ext.data.HttpProxy({
url: '/bin/linkchecker',
method: 'GET'
}),
reader: new CQ.Ext.data.JsonReader({
"root": "data",
"fields": fields,
"idProperty":'jcrObject',
totalProperty: 'results'
}),
baseParams: { searchterm: term,startpath: rootpath, endpath: end,
internal: internal_links,external: external_links,smart: smart_links,videoid: videoid_links}
});
test=this.store;
this.store.on('beforeload',function(store, operation,eOpts){
limit= CQ.Ext.getCmp('limit').getRawValue();
limit = (limit=="") ? 15 : limit;
pageSize = limit;
start=operation.params.start;
start = (start==null) ? 0 : start;
searchterm = CQ.Ext.getCmp('searchterm').getValue();
startpath = CQ.Ext.getCmp('startpath').getValue();
endpath = CQ.Ext.getCmp('endpath').getValue();
internal = CQ.Ext.getCmp('internal').getValue();
external = CQ.Ext.getCmp('external').getValue();
smart = CQ.Ext.getCmp('smart').getValue();
videoid = CQ.Ext.getCmp('videoid').getValue();
ebroken = CQ.Ext.getCmp('excludebroken').getValue();
ehealthy= CQ.Ext.getCmp('excludehealthy').getValue();
alert(start);
operation.params={
searchterm: searchterm ,startpath: startpath , endpath: endpath ,
internal: internal ,external: external,smart: smart,videoid: videoid,start:start,
limit:limit,ebroken: ebroken,ehealthy: ehealthy
};},this);
this.loadGrid();
this.loadForm();
// create main panel
this.panel = new CQ.Ext.Panel({
region: 'center',
layout: 'border',
margins: '5 5 5 5',
height:'100%',
border: false,
items: [this.form,this.grid]
});
// load grid data
this.reload();
// return outer panel
return this.panel;
},
/**
* Load form
*/
loadForm: function() {
var searchterm = null;
this.form = new CQ.Ext.form.FormPanel({
region: "north",
title: "Link Control Center",
width: 220,
top: 50,
height:350,
collapsible: false,
split: true,
parent: this,
padding:'10px',
items: [
{
xtype: 'textfield',
name: 'searchterm',
id: 'searchterm',
fieldLabel:'Search Term',
emptyText:'Please enter a search term',
width: 583
},
{
xtype: 'pathfield',
name: 'startpath',
id: 'startpath',
fieldLabel: 'Start Path',
allowBlank: false,
width: 600
},
{
xtype: 'pathfield',
name: 'endpath',
id: 'endpath',
fieldLabel: 'End Path',
width: 600
},
{
xtype: 'combo',
name: 'limit',
id:'limit',
fieldLabel: 'Result Display',
emptyText:'Select # results per page',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
store: [['val1','15'],['val2','100'],['val3','500'],['val4','1000'],['val5','All']]
},
{
fieldLabel: 'Link Type',
xtype: 'checkbox',
boxLabel: 'Internal',
checked : true,
name: 'internal',
id:'internal'
},
{
xtype: 'checkbox',
boxLabel: 'External',
checked : true,
name: 'external',
id:'external'
},
{
xtype: 'checkbox',
boxLabel: 'SMART',
checked : true,
name: 'smart',
id:'smart'
},
{
xtype: 'checkbox',
boxLabel: 'Video (Asset ID)',
checked : true,
name: 'videoid',
id: 'videoid'
},
{
fieldLabel: 'Exclude',
xtype: 'checkbox',
boxLabel: 'Exclude broken links',
name: 'excludebroken',
id:'excludebroken'
},
{
xtype: 'checkbox',
boxLabel: 'Exclude healthy links',
name: 'excludehealthy',
id: 'excludehealthy'
}
],
buttons:[{
text: 'Submit',
handler: function() {
searchterm = CQ.Ext.getCmp('searchterm').getValue();
startpath = CQ.Ext.getCmp('startpath').getValue();
endpath = CQ.Ext.getCmp('endpath').getValue();
internal = CQ.Ext.getCmp('internal').getValue();
external = CQ.Ext.getCmp('external').getValue();
smart = CQ.Ext.getCmp('smart').getValue();
videoid = CQ.Ext.getCmp('videoid').getValue();
limit = CQ.Ext.getCmp('limit').getRawValue();
pageSize=15;
alert("2");
test.clearFilter(false);
if(startpath){
if (endpath.substring(0, startpath.length) == startpath || endpath=="")
{
test.load();
}
else
{
alert('Specified End Path is not within Start Path node!\nSelect an End Path within and below Start Path hierarchy node');
}
}
else{
alert('Fill in all required fields before submitting the query');
}
}
}
]
});
},
/**
* Load grid
*/
loadGrid: function() {
// export to CSV button
this.exportCSVButton = new CQ.Ext.Button({iconCls: 'icon-csv', text: 'Export as CSV'});
this.exportCSVButton.setHandler(function() {
searchterm = CQ.Ext.getCmp('searchterm').getValue();
startpath = CQ.Ext.getCmp('startpath').getValue();
endpath = CQ.Ext.getCmp('endpath').getValue();
internal = CQ.Ext.getCmp('internal').getValue();
external = CQ.Ext.getCmp('external').getValue();
smart = CQ.Ext.getCmp('smart').getValue();
videoid = CQ.Ext.getCmp('videoid').getValue();
ebroken = CQ.Ext.getCmp('excludebroken').getValue();
ehealthy= CQ.Ext.getCmp('excludehealthy').getValue();
var url = "/bin/linkchecker.csv?searchterm="+searchterm +"&startpath="+startpath +"&endpath="+endpath+ "&internal="+internal +"&external="+external+
"&smart="+smart+"&videoid"+videoid+"&ebroken="+ebroken +"&ehealthy="+ehealthy+"&start=0&limit=-1" ;
window.location=(url);
}, this);
var body = CQ.Ext.getBody();
this.grid = new CQ.Ext.grid.GridPanel({
region: "center",
border:false,
store: this.store,
//parent:this,
loadMask: new CQ.Ext.LoadMask(body, {msg: 'Loading please wait...'}),
tbar: ['Result List',
'->', this.exportCSVButton
],
columns: [
{header: "Path", width: 80,dataIndex: 'path', sortable: true},
{header: "JCR Object Node", width: 80,dataIndex: 'jcrObject', sortable: true},
{header: "Type", width: 15, dataIndex: 'type', sortable: true},
{header: "URL", width: 70, dataIndex: 'URL', sortable: true},
{header: "Error Type", width:15, dataIndex: 'response', sortable: true,
renderer: function(value){ if (value =='200')return '<span style="color:green;">'+value+'</span>'; else return '<span style="color:red;">'+value+'</span>';}}
],
renderTo:this.grid,
stripeRows: true,
viewConfig: {
forceFit: true
},
bbar: new CQ.Ext.PagingToolbar({
store: this.store,
pageSize:this.pageSize,
displayInfo: true
}),
sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true}),
iconCls:'icon-grid'
});
alert("3");
this.grid.loadMask.show();
},
/**
* Reload grid data (reset to first page)
*/
reload: function() {
alert("4");
this.store.load({ baseParams: {start: 0, limit: this.pageSize}});
}
}
感謝您的回覆,但它沒有奏效。任何其他建議? – user2123571 2013-03-01 14:48:38
是的,嘗試'params'而不是'baseParams'。我不能嘗試你的例子atm我可以嘗試並稍後做一個示例。 – 2013-03-01 14:54:22