接下来编写paging.js代码，主要用到了Ext.FormPanel和Ext.Window 两个控件来提供编辑和添加界面，paging.js的所有代码如下，包括前一节的那部分。
/**//*
* Author by Xiaozhuang
*
*
*/
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.WCFHttpProxy({
url: '/EmployeeService.svc/GetEmployeePaging'
}),
// create reader that reads the Topic records
reader: new Ext.data.WCFJsonReader({
root: 'EmployeeList',
totalProperty: 'TotalCount',
id: 'EmployeeID',
fields: [
{name: 'EmployeeID', type: 'int'},
{name: 'CnName', type: 'string'},
{name: 'Sex', type: 'string'},
{name: 'Age', type: 'int'},
{name: 'Email', type: 'string'},
{name: 'OnWorkDate',type:'string'},
{name: 'DeptName', type: 'string'}
]
}),
// turn on remote sorting
remoteSort: true
});
store.setDefaultSort('EmployeeID', 'ASC');
// 把true和false转化为男或者女，这个其实可以在服务器端进行转化，写在这里只是为了测试
function renderSex(value, p, record){
return record.data.Sex=="true"?"男":"女";
}
//这个函数演示了怎样把服务器端的DateTime类型转为Javascript的日期
function renderOnWorkDate(value, p, record){
var jsondate = record.data.OnWorkDate;
return eval("new " + jsondate.substr(1,jsondate.length-2)).toLocaleDateString();
}
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store
var nm = new Ext.grid.RowNumberer();
var sm = new Ext.grid.CheckboxSelectionModel(); // add checkbox column
var cm = new Ext.grid.ColumnModel([nm,sm,{
header: "员工ID",
dataIndex: 'EmployeeID',
width: 100
// renderer: renderTopic
},{
header: "姓名",
dataIndex: 'CnName',
width: 200
},{
header: "性别",
dataIndex: 'Sex',
width: 70,
renderer: renderSex
},{
header: "年龄",
dataIndex: 'Age',
width: 70
},{
header: "Email",
dataIndex: 'Email',
width: 150
},{
header: "入职时间",
dataIndex: 'OnWorkDate',
width: 150,
renderer: renderOnWorkDate
},{
header: "部门",
dataIndex: 'DeptName',
width: 200
}]);
// by default columns are sortable
cm.defaultSortable = true;
var grid = new Ext.grid.GridPanel({
//el:'topic-grid',
renderTo: document.body,
width:800,
height:500,
title:'分页和排序列表',
store: store,
cm: cm,
trackMouseOver:false,
sm: sm,
loadMask: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
return 'x-grid3-row-collapsed';
}
},
// inline toolbars
tbar:[{
text:'添加',
tooltip:'添加一条记录',
iconCls:'add',
handler:handleAdd
}, '-', {
text:'修改',
tooltip:'修改',
iconCls:'option',
handler:handleEdit
},'-',{
text:'删除',
tooltip:'删除记录',
iconCls:'remove',
handler:handleDelete
}],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true
})
});
// render it
grid.render();
// trigger the data store load
var request={start:0,limit:25};
store.load({params:request});
//获取部门列表
var deptDs = new Ext.data.Store({
proxy: new Ext.data.WCFHttpProxy({
url:'/EmployeeService.svc/GetDeptList'
}),
reader: new Ext.data.WCFJsonReader({
root: 'DeptList',
id: 'DeptID'
}, [ 'DeptID', 'DeptName']
),
remoteSort: false
});
//员工信息表单
var EmpForm = new Ext.FormPanel({
frame: true,
labelAlign: 'right',
labelWidth: 120,
width: 450,
height:250,
items: new Ext.form.FieldSet({
title: '员工资料',
autoHeight: true,
defaults: {width: 200},
defaultType: 'textfield',
items: [new Ext.form.Hidden({
name: 'EmployeeID'
}),{
fieldLabel: '姓名',
name: 'CnName',
allowBlank:false
},new Ext.form.ComboBox({
fieldLabel: '性别',
hiddenName:'Sex',
store: new Ext.data.SimpleStore({
fields: ['value', 'text'],
data : [[1,'男'],[0,'女']]
}),
valueField:'value',
displayField:'text',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
allowBlank:false
}),new Ext.form.NumberField({
fieldLabel: '年龄',
name: 'Age'
}), {
fieldLabel: 'Email',
name: 'Email',
vtype:'email'
}, new Ext.form.DateField({
fieldLabel: '入职时间',
name: 'OnWorkDate',
allowBlank:false,
format : "Y-m-d"
}), new Ext.form.ComboBox({
fieldLabel: '所属部门',
name: 'DepartmentName',
hiddenName: 'DepartmentID',
store: deptDs,
valueField: 'DeptID',
displayField: 'DeptName',
typeAhead: true,
mode: 'remote',
triggerAction: 'all',
emptyText: '请选择部门',
selectOnFocus: true,
allowBlank: false
})
]
})
});
function handleAdd(){
var AddEmpWin = new Ext.Window({
title: '增加新员工',
layout:'fit',
width:500,
height:300,
plain: true,
items:EmpForm,
buttons: [{
text:'保存',
handler: AddRecord
},{
text: '取消',
handler: function(){
AddEmpWin.hide();
}
}]
});
AddEmpWin.show(this);
}
function handleEdit(){
var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
if(selectedKeys.length != 1){
Ext.MessageBox.alert('提示','请选择一条记录！');
}
else {
var EditEmpWin = new Ext.Window({
title: '修改员工资料',
layout:'fit',
width:500,
height:300,
plain: true,
items:EmpForm,
buttons: [{
text:'保存',
handler: UpdateRecord
},{
text: '取消',
handler: function(){
EditEmpWin.hide();
}
}]
});
EditEmpWin.show(this);
//Ext.MessageBox.alert("提示",selectedKeys);
deptDs.load(); //取得科室列表
var request = {empID:selectedKeys[0]};
Ext.MessageBox.show({
msg: '正在请求数据, 请稍侯',
progressText: '正在请求数据',
width:300,
wait:true,
waitConfig: {interval:200}
});
Ext.Ajax.request({
url: '/EmployeeService.svc/GetEmployee', //url to server side script
method: 'POST',
params:Ext.util.JSON.encode(request),//the unique id(s)
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
var formvalue=ConvertResponseText(response.responseText,"OnWorkDate",true,true);
EmpForm.form.setValues(formvalue);
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("失败，请重试",response.responseText);
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
},
success:function(response,options){
Ext.MessageBox.hide();
}
})// end Ajax request
}
}
function UpdateRecord(btn)
{
if (EmpForm.form.isValid()) {
btn.disabled=true;
Ext.MessageBox.show({
msg: '正在请求数据, 请稍侯',
progressText: '正在请求数据',
width:300,
wait:true,
waitConfig: {interval:200}
});
var formvalue = EmpForm.form.getValues();
var request = {emp:ConvertFormValue(formvalue,'OnWorkDate')};
//Ext.MessageBox.alert("提示",formvalues);
Ext.Ajax.request({
url: '/EmployeeService.svc/UpdateEmployee', //url to server side script
method: 'POST',
params:Ext.util.JSON.encode(request),//the unique id(s)
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
var alertcontent=ConvertResponseText(response.responseText,"",true,false);
Ext.MessageBox.alert("成功",alertcontent);
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("失败，请重试",response.responseText);
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
},
success:function(response,options){
Ext.MessageBox.hide();
store.reload();
}
})// end Ajax request
}
}
function AddRecord(btn)
{
if (EmpForm.form.isValid()) {
btn.disabled=true;
Ext.MessageBox.show({
msg: '正在请求数据, 请稍侯',
progressText: '正在请求数据',
width:300,
wait:true,
waitConfig: {interval:200}
});
var formvalue = EmpForm.form.getValues();
var request = {emp:ConvertFormValue(formvalue,'OnWorkDate')};
//Ext.MessageBox.alert("提示",formvalues);
Ext.Ajax.request({
url: '/EmployeeService.svc/AddEmployee', //url to server side script
method: 'POST',
params:Ext.util.JSON.encode(request),//the unique id(s)
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
var alertcontent=ConvertResponseText(response.responseText,"",true,false);
Ext.MessageBox.alert("成功",alertcontent);
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("失败，请重试",response.responseText);
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
},
success:function(response,options){
Ext.MessageBox.hide();
store.reload();
}
})// end Ajax request
}
}
function handleDelete(){
var selectedKeys = grid.selModel.selections.keys; //returns array of selected rows ids only
if(selectedKeys.length > 0)
{
Ext.MessageBox.confirm('提示','您确实要删除选定的记录吗？', deleteRecord);
}
else
{
Ext.MessageBox.alert('提示','请至少选择一条记录！');
}//end
}
function deleteRecord(btn){
if(btn=='yes'){
var selectedRows = grid.selModel.selections.items;//returns record objects for selected rows (all info for row)
var selectedKeys = grid.selModel.selections.keys;
//var deleteresult = AjaxRequest('/EmployeeService.svc/DelEmployee',selectedKeys,false,"")
Ext.MessageBox.show({
msg: '正在请求数据, 请稍侯',
progressText: '正在请求数据',
width:300,
wait:true,
waitConfig: {interval:200}
});
Ext.Ajax.request({
url: '/EmployeeService.svc/DelEmployee', //url to server side script
method: 'POST',
params:Ext.util.JSON.encode(selectedKeys),//the unique id(s)
callback: function (options, success, response) {
if (success) { //success will be true if the request succeeded
Ext.MessageBox.hide();
var alertcontent=ConvertResponseText(response.responseText,"",false,false);
Ext.MessageBox.alert("成功",alertcontent);
} else {
Ext.MessageBox.hide();
Ext.MessageBox.alert("失败，请重试",response.responseText);
}
},
//the function to be called upon failure of the request (server script, 404, or 403 errors)
failure:function(response,options){
Ext.MessageBox.hide();
ReturnValue = Ext.MessageBox.alert("警告","出现异常错误！请联系管理员！");
},
success:function(response,options){
Ext.MessageBox.hide();
store.reload();
}
})// end Ajax request
}//end if click 'yes' on button
} // end deleteRecord
});