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 : "取消", handler : wind } ] } }); var win; function wind() { win = Ext.create("widget.window", { title : "window", closable : true, closeAction : 'hide', width : 600, height : 350, tools : [ { type : "pin" } ] }); if (win.isVisible()) { win.hide(this, function() { button.dom.disabled = false; }); } else { win.show(this, function() { button.dom.disabled = false; }); } } 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(); }