關於EXT COMBOX的讀取本地XML進行數據分頁

最新推荐文章于 2024-09-15 13:15:46 发布

wern0565

最新推荐文章于 2024-09-15 13:15:46 发布

阅读量970

点赞数

文章标签： ext xml function json 服务器联想

本文链接：https://blog.csdn.net/wern0565/article/details/6061400

版权

背景：

網上都有關於這些的這樣那樣的說法。例如：基於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
    });