ExtJS GridPanel分页、添加、删除、修改

CheckboxSelectionModel是grid的选择模式
删除行应该使用grid的store.remove方法。
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=="部门名称重复！")
                {
                    return;
                }
//                var currentPageNum=this.getBottomToolbar().getPageData().activePage;//得到当前是第几页
//                var limitNum=this.getBottomToolbar().getPageData().pages;//得到总页数
                var start=this.getBottomToolbar().cursor;  //得到当前记录指针
                var limit=this.getBottomToolbar().pageSize; //得到每页要显示的记录数
                this.getStore().load({params:{start:start,limit:limit}});
                win.addFormPanel.getForm().reset();
            },
            scope:this
        });
    },
    deleteBranch:function(){
        var br=this.getSelectionModel().getSelected().data;
        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().cursor;
                    var start=this.getBottomToolbar().cursor-this.getBottomToolbar().pageSize;
                    var pageSize=this.getBottomToolbar().pageSize;
                    this.getStore().load({params:{start:start,limit:pageSize}});
                    return;
                }
                this.getStore().remove(this.getSelectionModel().getSelected()) ;
//                var cursor=this.getBottomToolbar().cursor;
//                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 System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

/// <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 System;
using System.Web;
using System.Linq;
using System.Web.Script.Serialization;

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)
        {
            return;
        }
        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 {
            return false;
        }
    }

}

AddBranch.ashx
using System;
using System.Web;
using System.Linq;
public class AddBranch : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        DataClassesDataContext dc = new DataClassesDataContext();
        context.Response.ContentType = "text/plain";
        if (context.Request["brname"] == null)
        {
            return;
        }
        string brname = context.Request["brname"].Trim();
        int count = dc.Branch.Count(p=>p.brname==brname);
        if (count != 1)
        {
            Branch br = new Branch();
            br.brname = brname;
            dc.Branch.InsertOnSubmit(br);
            dc.SubmitChanges();
        }
        else
        {
            context.Response.Write("{success:true,msg:" + "\"" + "部门名称重复！" + "\"" + "}");
            return;
        }
        context.Response.Write("{success:true,msg:" + "\"" + "添加成功！" + "\"" + "}");
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

UpdataBranch.ashx

using System;
using System.Web;
using System.Linq;
public 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 {
            return false;
        }
    }

}