背景:
網上都有關於這些的這樣那樣的說法。例如:基於Ext2.x版本的可參照:
http://www.cnblogs.com/fmxyw/archive/2009/05/22/1487126.html
基於ext 3.x版本就是要重寫PagingToolbar的doLoad(裝載數據時調用),moveFirst(轉到第一頁),movePrevious(轉到前一頁),moveNext(轉到下一頁),moveLast(轉到最後一頁),doRefresh(刷新當前頁)。
如:
// Create創建用戶的擴展(User eXtensions namespace (Ext.ux))
Ext.namespace('Ext.ux');
Ext.ux.PagingToolbarEx = function(config)
{
// 調用父類的構建函數
Ext.ux.PagingToolbarEx.superclass.constructor.call(this, config);
}
Ext.ux.PagingToolbarEx = Ext.extend(Ext.PagingToolbar,{
doLoad : function(start)
{
var o = {}, pn = this.getParams();
o[pn.start] = start;
o[pn.limit] = this.pageSize;
var strInfo2 = {};
strInfo2 = Xml2JSON("TEST",o);
if(this.fireEvent('beforechange', this, o) !== false){
this.store.loadData(strInfo2);
}
},
moveFirst:function()
{
//alert("moveFirst");
this.doLoad(0);
},
movePrevious:function()
{
//alert("movePrevious");
this.doLoad(Math.max(0, this.cursor-this.pageSize));
},
moveNext:function()
{
//alert("moveNext");
this.doLoad(this.cursor+this.pageSize);
//alert("moveNext:"+this.cursor);
},
moveLast:function()
{
//alert("moveLast");
var total = this.store.getTotalCount(),
extra = total % this.pageSize;
this.doLoad(extra ? (total - extra) : total - this.pageSize);
},
doRefresh:function()
{
//alert("doRefresh");
this.doLoad(this.cursor);
}
});
Ext.ux.ComboboxBar = function(config)
{
// 調用父類的構建函數
Ext.ux.ComboboxBar.superclass.constructor.call(this, config);
}
// extend
Ext.extend(Ext.ux.ComboboxBar, Ext.form.ComboBox, {
flag: 0,
initComponent:function()
{/*這裏修改的是下拉項的樣式及圖片事件的增加*/
Ext.ux.ComboboxBar.superclass.initComponent.call(this);
},
initList:function ()
{
Ext.ux.ComboboxBar.superclass.initList.call(this);
if (this.pageSize) {
if(this.pageTb)
{
Ext.destroy(this.pageTb);
}
this.pageTb = new Ext.ux.PagingToolbarEx({
store:this.store,
pageSize:this.pageSize,
renderTo:this.footer
});
}
}
});
這樣就可以使用翻頁的事件,從而可以對本地數據進行分頁處理了。。。
下面是控件的引用代碼:
var store3 = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(strInfo1),
reader: new Ext.data.JsonReader({
totalProperty:"totalPorperty",
root:"result",
fields:[{name: 'values'}]
})// 如何解析
});
// 我的json數據格式是{totalPorperty:總數,result:[{values:我的數據值},{values:我的數據值}……]}
var managerList = new Ext.ux.ComboboxBar
({
store: store3,
displayField:'values',
valueField:'values',
typeAhead: true,
xtype: 'combo',
mode: 'local',//指定數據加載方式,如果直接從客戶端加載則爲local,如果從服務器斷加載 則爲remote.默認值爲:remote
id:'EXT_TEST',
name:'EXT_TEST',
triggerAction: 'all',//點擊下拉按鈕全部顯示
emptyText:'',
editable:true,//默認爲true,false爲禁止手寫和聯想功能
width:150,
renderTo:'DIV_TEST',
resizable:true,
pageSize:200
});