extjs4 pagingToolbar分页更新问题

extjs4

 

相信很多人在用from对grid动态查询时，都遇到过pagingtoolar分页不更新的问题，我也是翻了好多次api,搜索了好多次，试用了好多次，终于找到了解决办法，希望对大家有用。

 

在下面的代码中，可以直接拷到页面中用，但需要改几个地方：

1.form中的items

2.proxy的url

3.fields的field

4.grid的columns

5.save()方法中的extraParams要传递的参数

改动的地方都很简单，需要根据实际情况而定.

**************其中save()方法，实现了动态更新grid及pagingToolbar的数据。

var form = Ext.create("Ext.form.FormPanel", {  
    frame : true,  
    autoWidth : true,  
    bodyPadding : '5 5 5 5',  
    fieldDefaults : {  
        labelAlign : "right",  
        msgTarget : "side",  
        labelWidth : 60  
    },  
    layout : {  
        type : "table",  
        columns : 2,  
        tdAttrs : {  
            style : "padding:2px"  
        }  
    },  
    items : [ {  
        xtype : "textfield",  
        id:"title",  
        fieldLabel : "职务名称"  
    }, {  
        xtype : "textfield",  
        id:"group",  
        fieldLabel : "组织名称"  
  
    } ],  
    buttons : {  
        menuAlign : "center",  
        items : [ {  
            type : "submit",  
            text : "查询",  
            handler : save  
        }, {  
            type : "rest",  
            text : "取消" 
        } ]  
    }  
});  
  

   
Ext.define('fields', {  
    extend : 'Ext.data.Model',  
    fields : [ "title", "sendtime", "sheetid" ]  
});  
  
var proxy;  
function setProxy() {  
    var url = "http://localhost:8080/etw/user2!extJson2.action";  
    proxy = new Ext.data.HttpProxy({  
        type : 'ajax',  
        url : url,  
        reader : {  
            type : "json",  
            root : "list",  
            totalProperty : "jsonStr"  
        }  
    });  
    return proxy;  
}  
  
var store = new Ext.data.JsonStore({  
    pageSize : 3,  
    proxy : setProxy(),  
    model : "fields"  
});  
  
var page = new Ext.PagingToolbar({  
    id : "page",  
    store : store,  
    displayInfo : true,  
    emptyMsg : "no data"  
});  
  
var grid = Ext.create("Ext.grid.Panel", {  
    id : "grid",  
    height : 200,  
    store : store,  
    loadMask : true,  
    disableSelection : true,  
    resizable : true,  
    columns : [ {  
        text : "title",  
        dataIndex : "title"  
    }, {  
        text : "sheetid",  
        dataIndex : "sheetid"  
    }, {  
        text : "sendtime",  
        dataIndex : "sendtime"  
    } ],  
    bbar : page  
});  
store.loadPage(1);  
  
var centerRegion = new Ext.create("Ext.Panel", {  
    id : "center_region",  
    title : "职务管理",  
    region : "center",  
    width : "80%",  
    xtype : "panel",  
    items : [ form, grid ],  
    renderTo : Ext.getBody()  
});  
  
function save() {  
      
    var title = form.getForm().findField("title").getValue();  
    var group = form.getForm().findField("group").getValue();  
  
    store.on("beforeload", function() {  
        Ext.apply(store.proxy.extraParams, {  
            title : title,  
            sheetid:group  
        });  
  
    });  
    store.load();  
  
}