博客分类：
解决ExtJs分页grid中load数据为空时不能刷新Ext.PagingToolbar信息的问题
在extjs2.0的grid中,要根据不同的查询条件展示不同的数据,在第一次查出数据后显示在grid中,而在修改查询条件后,查询到的数据为空,这时在grid中前没有刷新,还是显示的第一次查询结果.而需求认为此时应该清空列表,并刷新下面的上下页导航条.
在extjs的api中只提供了对store.removeAll()的方法,而对PagingToolbar在文档中却没有类似update()的方法.通过阅读源码了解到PagingToolbar提供了一个方法叫updateInfo()可以做更新.
grid.store.load({//加载列表数据
params : {
callback :function(r,options,success){
if(!success){//没取到数据时返回的success=false
grid.store.removeAll();//清除原有数据
//更新page导航信息
tbbar.updateInfo();
tbbar.afterTextEl.el.innerHTML = String.format("共 {0} 页", 1);
tbbar.first.setDisabled(true);
tbbar.prev.setDisabled(true);
tbbar.next.setDisabled(true);
tbbar.last.setDisabled(true);
tbbar.loading.disable();
论坛回复 /
(0 / 6995)
浏览: 515895 次
来自: 北京
put()方法调用前必须先手动调用remove()，不然不会实 ...
方便问下，去哪里下载包含Ext.ux.TabCloseMenu ...
对于基本类型的讲解，文章写的有点简单了，没有系统化，这篇文章介 ...
kgkg521 写道不能运行，老报一个“A[C.xtype | ...
需要HTTP服务器才可以ExtJS GridPanel分页、添加、删除、修改
我的图书馆
ExtJS GridPanel分页、添加、删除、修改
/******************部门信息表格控件*****************************************************/BranchGrid=Ext.extend(Ext.grid.GridPanel,{& //从Ext.grid.GridPanel中继承&&& AddBranch:null, //声明Window组件&&& constructor:function(){//构件器&&&&&&& this.AddBranch=new AddBranchWindow();//创建 window组件&&&&&&& this.store=new Ext.data.Store({& //数据源////&&&&&&&&&&&&&&& autoLoad:true,//为“true”自动加载数据&&&&&&&&&&&&&&& url:"GetBranchGrid.ashx",//从那里获得数据&&&&&&&&&&&&&&& reader:new Ext.data.JsonReader({&&&&&&&&&&&&&&&&&&&&&&& root:"data",&&&&&&&&&&&&&&&&&&&&&&& totalProperty:"count"&&&&&&&&&&&&&&&&&&& },[ //设置格式&&&&&&&&&&&&&&&&&&&&&&& {name:"ID",type:"int"},&&&&&&&&&&&&&&&&&&&&&&& {name:"brname",type:"string"}&&&&&&&&&&&&&&& ])&&&&&&&&&&& });&&&&&&& BranchGrid.superclass.constructor.call(this,{ //对父类初始化&&&&&&&&&&& title:"部门信息",&&&&&&&&&&& renderTo:Ext.getBody(),&&&&&&&&&&& width:410,&&&&&&&&&&& height:350,&&&&&&&&&&& store:this.store,&& //设置数据源&&&&&&&&&&& selModel:new Ext.grid.RowSelectionModel({& &&&&&&&&&&&&&&& singleSelect:true //定义选择模式”singleSelect“为ture时只能单选，默认为false&&&&&&&&&&& }),&&&&&&&&&&& columns:[new Ext.grid.RowNumberer(),{&&&&&&&&&&&&&&& header:"部门编号",&&&&&&&&&&&&&&& dataIndex:"ID",&&&&&&&&&&&&&&& align:"center"&&&&&&&&&&& },{&&&&&&&&&&&&&&& header:"部门名称",&&&&&&&&&&&&&&& dataIndex:"brname"&&&&&&&&&&& }],&&&&&&&&&&& loadMask:{msg:"数据加载中...."},&&&&&&&&&&& tbar:[{&&&&&&&&&&&&&&&&&&& text:"添加",&&&&&&&&&&&&&&&&&&& handler:this.showAdd,&&&&&&&&&&&&&&&&&&& scope:this&&&&&&&&&&&&&&& },"-",&&&&&&&&&&&&&&& {&&&&&&&&&&&&&&&&&&& text:"修改"&&&&&&&&&&&&&&& },"-",{&&&&&&&&&&&&&&&&&&& text:"删除",&&&&&&&&&&&&&&&&&&& handler:this.deleteBranch,&&&&&&&&&&&&&&&&&&& scope:this&&&&&&&&&&&&&&& }],&&&&&&&&&&&& bbar:new Ext.PagingToolbar({&&&&&&&&&&&&&&& pageSize:3,&&&&&&&&&&&&&&& store:this.store, //设置数据源&&&&&&&&&&&&&&& displayInfo: true,&&&&&&&&&&&&&&& displayMsg:"当前 {0}-{1} 条记录 /共 {2} 条记录",&&&&&&&&&&&&&&& emptyMsg: "无显示数据"&&&&&&&&&&&& })&&&&&&& });&&&&&&& &&&&&&& this.getStore().load({params:{start:0,limit:3}});&&&&&&& &&&&&&& this.AddBranch.on("OnButtonClick",this.OnButtonClick,this);//捕获AddBranchWindow中的OnButtonClick事件&&& },&&& showAdd:function(){&&&&&&& this.AddBranch.show();&&& },&&& OnButtonClick:function(win){& //OnButtonClick事件处理函数&&&&&&& var name=win.findByType("textfield")[0].getValue();&&&&&&& win.addFormPanel.getForm().submit({& //进行AJAX请求&&&&&&&&&&& waitMsg:"数据保存中...",&&&&&&&&&&& url:"AddBranch.ashx",&&&&&&&&&&& success:function(form,response){& //当success为true时执行的回调函数&&&&&&&&&&&&&&& var temp=Ext.util.JSON.decode(response.response.responseText);&&&&&&&&&&&&&&& Ext.Msg.alert("系统提示！",temp.msg);&&&&&&&&&&&&&&& if(temp.msg=="部门名称重复！")&&&&&&&&&&&&&&& {&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }//&&&&&&&&&&&&&&& var currentPageNum=this.getBottomToolbar().getPageData().activeP//得到当前是第几页//&&&&&&&&&&&&&&& var limitNum=this.getBottomToolbar().getPageData().//得到总页数&&&&&&&&&&&&&&& var start=this.getBottomToolbar().& //得到当前记录指针&&&&&&&&&&&&&&& var limit=this.getBottomToolbar().pageS //得到每页要显示的记录数 &&&&&&&&&&&&&&& this.getStore().load({params:{start:start,limit:limit}});&&&&&&&&&&&&&&& win.addFormPanel.getForm().reset();&&&&&&&&&&& },&&&&&&&&&&& scope:this&&&&&&& });&&& },&&& deleteBranch:function(){&&&&&&& var br=this.getSelectionModel().getSelected().&&&&&&& Ext.Ajax.request({&&&&&&&&&&& url:"updataBranch.ashx",&&&&&&&&&&& success:function(response){&&&&&&&&&&&&&&& Ext.Msg.alert("系统提示",Ext.util.JSON.decode(response.responseText).msg);&&&&&&&&&&&&&&& if(this.getStore().getCount()==1)//如果当前store的数据记录数等于1那么就从服务器端加载数据，否则从store中删除选定的Record&&&&&&&&&&&&&&& {&&&&&&&&&&&&&&&&&&& var cursor=this.getBottomToolbar().&&&&&&&&&&&&&&&&&&& var start=this.getBottomToolbar().cursor-this.getBottomToolbar().pageS&&&&&&&&&&&&&&&&&&& var pageSize=this.getBottomToolbar().pageS&&&&&&&&&&&&&&&&&&& this.getStore().load({params:{start:start,limit:pageSize}});&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&& this.getStore().remove(this.getSelectionModel().getSelected()) ;//&&&&&&&&&&&&&&& var cursor=this.getBottomToolbar().//&&&&&&&&&&&&&&& this.getStore().load({params:{start:cursor-1,limit:this.getBottomToolbar().pageSize}});&&&&&&&&&&& },&&&&&&&&&&& scope:this,&&&&&&&&&&& params:{branch:Ext.util.JSON.encode(br)}&&&&&&& });&&& }});/******************添加表单FormPanel控件*********************************************/AddBranchFormPanel=Ext.extend(Ext.form.FormPanel,{&&& constructor:function(){&&&&&&& AddBranchFormPanel.superclass.constructor.call(this,{&&&&&&&&&&& defaultType:"textfield",&&&&&&&&&&& baseCls:"x-plain",//应用容器控件背景颜色&&&&&&&&&&& bodyStyle:"padding:5 0 0 5", //设置border样式//&&&&&&&&&&& frame:true,&&&&&&&&&&& labelWidth:55,&&&&&&&&&&& defaults:{anchor:"98%"}, //使用锚点布局设置缺省控件宽度&&&&&&&&&&& items:[{&&&&&&&&&&&&&&& fieldLabel:"部门名称",&&&&&&&&&&&&&&& allowBlank:false,&&& //非空验证&&&&&&&&&&&&&&& blankText:"部门名称不能为空！",//为空时显示的提示信息&&&&&&&&&&&&&&& name:"brname"&&&&& //name属性一定要与服务器端定义的Request["brname"]一致，不然服务器端得不到数据&&&&&&&&&&& }]&&&&&&& });&&& }});/******************添加表单Window控件**********************************************/AddBranchWindow=Ext.extend(Ext.Window,{&&& addFormPanel:null,&&& constructor:function(){&&&&&&& this.addFormPanel=new AddBranchFormPanel();&&&&&&& AddBranchWindow.superclass.constructor.call(this,{&&&&&&&&&&& title:"添加部门信息",&&&&&&&&&&& width:300,&&&&&&&&&&& height:100,&&&&&&&&&&& renderTo:Ext.getBody(),&&&&&&&&&&& plain:true,&&&&&&&&&&& closeAction:"hide",//使关闭模式为隐藏（hide）&&&&&&&&&&& mode:true,&&&&&&&&&&& buttons:[{&&&&&&&&&&&&&&& text:"确 定",&&&&&&&&&&&&&&& handler:this.addBranchRecord,&&&&&&&&&&&&&&& scope:this&&&&&&&&&&& },{&&&&&&&&&&&&&&& text:"关 闭",&&&&&&&&&&&&&&& handler:this.close,&&&&&&&&&&&&&&& scope:this&&&&&&&&&&& }],&&&&&&&&&&& items:this.addFormPanel&&&&&&& });&&&&&&& this.addEvents("OnButtonClick");//添加自定义OnButtonClick事件，为外部组件提供接口&&& },&&& close:function(){&&&&&&& this.hide();&&& },&&& addBranchRecord:function(){&&&&&&& this.fireEvent("OnButtonClick",this); //在单击确定按钮时触发OnButtonClick事件&&& }});
以下为服务器端代码:
首先为所有基类添加一个扩展方法(JSONHelper)，以便处理JSON
using Susing System.Dusing System.Cusing System.Lusing System.Wusing System.Web.Susing System.Web.UI;using System.Web.UI.HtmlCusing System.Web.UI.WebCusing System.Web.UI.WebControls.WebPusing System.Xml.L
/// &summary&///JSONHelper 的摘要说明/// &/summary&public static class JSONHelper{&&& public static string ToJson(this object obj)&&& {&&&&&&& System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();&&&&&&& return js.Serialize(obj);&&& }}
HTTP处理程序 GetBranchGrid.ashx
using Susing System.Wusing System.Lusing System.Web.Script.S
public class GetBranchGrid : IHttpHandler {&&& private DataClassesDataContext dc = new DataClassesDataContext();&&& public void ProcessRequest (HttpContext context) {&&&&&&& context.Response.ContentType = "text/plain";&&&&&&& if (context.Request["start"] == null || context.Request["limit"] == null)&&&&&&& {&&&&&&&&&&& &&&&&&& }&&&&&&& int start=Convert.ToInt32(context.Request["start"].Trim());&&&&&&& int limit = Convert.ToInt32(context.Request["limit"].Trim());&&&&&&& var branch = from p in dc.Branch&&&&&&&&&&&&&&&&&&&& select new { ID=p.ID , brname=p.brname };&&&&&&& int count = branch.Count();&&&&&&& string jsonbranch = branch.Skip(start).Take(limit).ToJson();&&&&&&& string jsonstr = "{" + "\"" + "count" + "\"" + ":" + count.ToString() + "," +&&&&&&&&&&&&&&&&&&&&&&& "\"" + "data" + "\"" + ":" + jsonbranch + "}";&&&&&&& context.Response.Write(jsonstr);&&& }&&&& public bool IsReusable {&&&&&&& get {&&&&&&&&&&&&&&&&&& }&&& }
AddBranch.ashxusing Susing System.Wusing System.Lpublic class AddBranch : IHttpHandler {&&& &&& public void ProcessRequest (HttpContext context) {&&&&&&& DataClassesDataContext dc = new DataClassesDataContext();&&&&&&& context.Response.ContentType = "text/plain";&&&&&&& if (context.Request["brname"] == null)&&&&&&& {&&&&&&&&&&& &&&&&&& }&&&&&&& string brname = context.Request["brname"].Trim();&&&&&&& int count = dc.Branch.Count(p=&p.brname==brname);&&&&&&& if (count != 1)&&&&&&& {&&&&&&&&&&& Branch br = new Branch();&&&&&&&&&&& br.brname =&&&&&&&&&&& dc.Branch.InsertOnSubmit(br);&&&&&&&&&&& dc.SubmitChanges();&&&&&&& }&&&&&&& else &&&&&&& {&&&&&&&&&&& context.Response.Write("{success:true,msg:" + "\"" + "部门名称重复！" + "\"" + "}");&&&&&&&&&&&&&&&&&& }&&&&&&& context.Response.Write("{success:true,msg:" + "\"" + "添加成功！" + "\"" + "}");&&& }&&&& public bool IsReusable {&&&&&&& get {&&&&&&&&&&&&&&&&&& }&&& }}
UpdataBranch.ashx
using Susing System.Wusing System.Lpublic class UpdataBranch : IHttpHandler {&&& &&& public void ProcessRequest (HttpContext context) {&&&&&&& context.Response.ContentType = "text/plain";&&&&&&& DataClassesDataContext dc = new DataClassesDataContext();&&&&&&& System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();&&&&&&& Branch temp= js.Deserialize&Branch&( context.Request["branch"].ToString());&&&&&&& Branch br = dc.Branch.Single(p=& p==temp);&&&&&&& dc.Branch.DeleteOnSubmit(br);&&&&&&& dc.SubmitChanges();&&&&&&& context.Response.Write("{success:true,msg:"+"\""+"删除成功！"+"\""+&&& "}");&&& }&&&& public bool IsReusable {&&&&&&& get {&&&&&&&&&&&&&&&&&& }&&& }
TA的最新馆藏
喜欢该文的人也喜欢博客分类：
相信很多人在用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
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 =
win.show(this, function() {
button.dom.disabled =
Ext.define('fields', {
extend : 'Ext.data.Model',
fields : [ "title", "sendtime", "sheetid" ]
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"
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();
浏览: 35080 次
来自: 北京
楼主，求流程图的代码。邮箱：
楼主，您好，求流程图的代码。能发个到我的邮箱吗，1263705 ...
楼主能分享一下代码不，谢谢，邮箱，sdzhihao@163.c ...
可以来一份么，楼主，好人 ...