dieslrae
2010-01-21 15:06 阅读 243

ext2.x中GridPanel本地数据分页的问题

由于数据量不多,大概3,40条,不分页又太长了,又不想服务器分页(很多东西写死了不好改),琢磨了一下怎么本地分页,还是没搞出来,请大家指点一下,我是用store的loadData把数据载入,PagingToolbar读到了数据,但是无法分页,也想不出来该怎么改了
[code="js"]
cxtjFormPanel = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
this.addEvents("query");
this.addEvents("reset");

    cxtjFormPanel.superclass.constructor.call(this,{
        autoHeight:true,
        baseCls:"x-plain",
        layout:"column",
        width:550,
        labelWidth:80,
        items:[
            {
                columnWidth:.5,
                defaults:{width:160},
                defaultType:"textfield",
                bodyStyle:"padding:5px",
                layout:"form",
                items:[
                    {
                        fieldLabel:"案件登记序号",
                        name:"ajdjXh",
                        maxLength:14
                    },{
                        fieldLabel:"纳税人编码",
                        name:"nsrbm",
                        maxLength:20
                    }
                ]
            },{
                columnWidth:.5,
                defaults:{width:160},
                defaultType:"textfield",
                bodyStyle:"padding:5px",
                layout:"form",
                items:[
                    {
                        fieldLabel:"案源登记序号",
                        name:"aydjXh",
                        maxLength:14
                    },{
                        fieldLabel:"纳税人名称",
                        name:"nsrmc"
                    }
                ]
            }
        ],
        buttons:[
            {
                text:"查询",
                handler:function(){
                    try{
                        this.onQuery();
                    }catch(e){
                        return;
                    }
                },
                scope:this
            },{
                text:"清空",
                handler:function(){
                    this.onReset();
                },
                scope:this
            }
        ]
    });
},

onQuery:function(){
    if(this.getForm().isValid())
        this.fireEvent("query",this.getForm());
    else
        throw Error();
},

onReset:function(){
    this.fireEvent("reset",this.getForm());
}

});

ajxxGridPanel = Ext.extend(Ext.grid.GridPanel,{
data:null,
constructor:function(){
this.addEvents("delete");

    this.data = new Ext.data.JsonStore({
        fields:["ajdjxh","aydjxh","nsrmc","ajmc","ajzt"]
    }),

    ajxxGridPanel.superclass.constructor.call(this,{
        title:"案件信息列表",
        autoHeight:true,
        frame:true,
        width:660,
        loadMask:{msg:"正在加载,请稍后..."},
        tbar:[
            {
                text:"删除案件",
                handler:function(){
                    try{
                        this.onDelete();
                    }catch(e){
                        Ext.Msg.alert("提示","请选择要删除的案件!");
                        return;
                    }
                },
                scope:this
            },"-"
        ],
        columns:[
            new Ext.grid.CheckboxSelectionModel(),
            {header:"案件编号",dataIndex:"ajdjxh",width:100},
            {header:"案源编号",dataIndex:"aydjxh",width:100},
            {header:"纳税人名称",dataIndex:"nsrmc",width:170},
            {header:"案件名称",dataIndex:"ajmc",width:170},
            {header:"案件状态",dataIndex:"ajzt",width:110}
        ],
        store:this.data,

// bbar: new Ext.PagingToolbar({
// pageSize: 10,

// store:this.data,
// displayInfo: true,

// displayMsg: '第{0} 到 {1} 条数据 共{2}条',

// emptyMsg: "没有数据"

// }),

sm:new Ext.grid.RowSelectionModel({
singleSelect:true
})
});
},

loadData:function(_data){
    this.getStore().loadData(_data,false);
},

onDelete:function(){
    if(this.getSelectionModel().getCount()>0)
        this.fireEvent("delete",this,this.getStore(),this.getSelectionModel().getSelected());
    else
        throw Error();
}

});

ViewPanel = Ext.extend(Ext.Panel,{
form:null,
grid:null,
constructor:function(){
this.form = new cxtjFormPanel();
this.grid = new ajxxGridPanel();

    ViewPanel.superclass.constructor.call(this,{
        title:"删除案件信息",
        plain:true,
        frame:true,
        autoHeight:true,
        //height:450,
        items:[
            this.form,
            this.grid
        ]
    });
}

});

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.TextField.prototype.msgTarget = "side";

var _view = new ViewPanel();
_view.render(Ext.getBody());

_view.form.on("query",function(_form){
    //_form["waitMsgTarget"] = this.getEl();
    _form.submit({
        url:"/qt/qt036JcScajxxExt-query.pfv",
        waitMsg:"正在查询,请稍后...",
        success:function(_f,_a){
            this.grid.loadData(_a.result.data);
        },
        failure:function(_f,_a){
            Ext.Msg.alert("错误","查询失败!");
        },
        scope:this
    });
},_view);

_view.form.on("reset",function(_form){
    _form.reset();
},_view);

_view.grid.on("delete",function(_grid,_store,_record){
    Ext.Msg.confirm("提示","是否删除案件["+_record.data.ajmc+"]?",function(_btn){
        if(_btn=="yes"){
            this.grid.getEl().mask("正在删除,请稍后...");
            Ext.Ajax.request({
                url:"/qt/qt036JcScajxxExt-delete.pfv",
                params:{ajdjXh:_record.data.ajdjxh,aydjXh:_record.data.aydjxh},
                success:function(_response){
                    var _result = Ext.util.JSON.decode(_response.responseText);

                    if(_result.state == "info"){
                        _store.remove(_record);
                    }
                    Ext.Msg.alert("提示",_result.message);
                    this.grid.getEl().unmask();
                },
                failure:function(){
                    Ext.Msg.alert("错误","删除案件失败!");
                    this.grid.getEl().unmask();
                },
                scope:this
            });
        }
    },this)
},_view);

});
[/code]

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    chanball chanball 2010-01-21 19:27

    找个PagingMemoryProxy

    把PagingMemoryProxy.js从examples/locale/目录下copy过来,导入html里:

    把以前的MemoryProxy换成PagingMemoryProxy。

    var ds = new Ext.data.Store({
    proxy: new Ext.data.PagingMemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
    {name: 'id'},
    {name: 'name'},
    {name: 'descn'}
    ])
    });

    好了,现在直接调用ds.load({params:{start:0,limit:3}})

    PangingMemoryProxy.js
    [code="js"]
    /*

    /* Fix for Opera, which does not seem to include the map function on Array's */
    if(!Array.prototype.map){
    Array.prototype.map = function(fun){
    var len = this.length;
    if(typeof fun != "function"){
    throw new TypeError();
    }
    var res = new Array(len);
    var thisp = arguments[1];
    for(var i = 0; i < len; i++){
    if(i in this){
    res[i] = fun.call(thisp, this[i], i, this);
    }
    }
    return res;
    };
    }

    /* Paging Memory Proxy, allows to use paging grid with in memory dataset */
    Ext.data.PagingMemoryProxy = function(data) {
    Ext.data.PagingMemoryProxy.superclass.constructor.call(this);
    this.data = data;
    };

    Ext.extend(Ext.data.PagingMemoryProxy, Ext.data.MemoryProxy, {
    load : function(params, reader, callback, scope, arg) {
    params = params || {};
    var result;
    try {
    result = reader.readRecords(this.data);
    }catch(e){
    this.fireEvent("loadexception", this, arg, null, e);
    callback.call(scope, null, arg, false);
    return;
    }

        // filtering
        if (params.filter!==undefined) {
            result.records = result.records.filter(function(el){
                if (typeof(el)=="object"){
                    var att = params.filterCol || 0;
                    return String(el.data[att]).match(params.filter)?true:false;
                } else {
                    return String(el).match(params.filter)?true:false;
                }
            });
            result.totalRecords = result.records.length;
        }
    
        // sorting
        if (params.sort!==undefined) {
            // use integer as params.sort to specify column, since arrays are not named
            // params.sort=0; would also match a array without columns
            var dir = String(params.dir).toUpperCase() == "DESC" ? -1 : 1;
            var fn = function(r1, r2){
                return r1 < r2;
            };
            result.records.sort(function(a, b) {
                var v = 0;
                if (typeof(a)=="object"){
                    v = fn(a.data[params.sort], b.data[params.sort]) * dir;
                } else {
                    v = fn(a, b) * dir;
                }
                if (v==0) {
                    v = (a.index < b.index ? -1 : 1);
                }
                return v;
            });
        }
    
        // paging (use undefined cause start can also be 0 (thus false))
        if (params.start!==undefined && params.limit!==undefined) {
            result.records = result.records.slice(params.start, params.start+params.limit);
        }
    
        callback.call(scope, result, arg, true);
    }
    

    });

    [/code]

    点赞 评论 复制链接分享
  • iteye_662 iteye_662 2010-01-21 18:01

    楼主 有了答案,请告诉我,我也这样问题。。。谢谢

    点赞 评论 复制链接分享

相关推荐