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(); }
相关推荐
NULL 博文链接:https://fuyu365-163-com.iteye.com/blog/1703697
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
ExtJS grid过滤操作,可以动态操作本地的store更改筛选的内容
ExtJs+Dwr(Grid)实现分页功能,很实用
extjs 分页 从dao到action
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
Extjs动态Grid的生成 htm
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
extjs4打印grid插件,官网上的一个例子程序,有需要的人可以下载来看看。
Extjs4 Grid分页与自动刷新
非传统分页工具. 简单说明下: 显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能....
NULL 博文链接:https://sonckchi.iteye.com/blog/1958861
非传统分页工具. 简单说明下: 显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能....
NULL 博文链接:https://kohisa.iteye.com/blog/651399
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
extjs的pagingtoolbar 点击下一页时,出现store的load时间,但是只有start和limit这两个参数,这样就出现了,点击下一页的时候,查询出 的结果和条件不符合。虽然可以通过一次查处所有符合条件的记录,然后根据传入...
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
使用ExtJs相关的控件类自己实现的一个ExtJs的Grid列表的导出功能,可以导出列表的相关样式等
ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能