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;
}
}

}