Section III: ExtJS invoke WCF Series-----Add, modify, delete (2)

Next, write the Paging.js code, which uses the Ext.formpanel and Ext.window two controls to provide an editing and adding interface, and paging.js all the code below, including the section in the previous section.

/**//*

* 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 the same domain as
This page, a 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 ');

Convert true and false to male or female, this can actually be transformed on the server side, written here just to test
function Rendersex (value, p, record) {
Return record.data.sex== "true"? Male ":" Female ";
}
This function demonstrates how to convert a server-side datetime type to JavaScript date
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
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: "Employee ID",
Dataindex: ' EmployeeID ',
width:100
Renderer:rendertopic
},{
Header: "Name",
Dataindex: ' Cnname ',
width:200
},{
Header: "Gender",
Dataindex: ' Sex ',
Width:70,
Renderer:rendersex
},{
Header: "Age",
Dataindex: ' Age ',
Width:70

},{
Header: "Email",
Dataindex: ' Email ',
width:150
},{
Header: "Entry Time",
Dataindex: ' Onworkdate ',
width:150,
Renderer:renderonworkdate
},{
Header: "department",
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: ' Pagination and sorted list ',
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: ' Add ',
ToolTip: ' Add a record ',
Iconcls: ' Add ',
Handler:handleadd
}, '-', {
Text: ' Modify ',
ToolTip: ' Modify ',
Iconcls: ' option ',
Handler:handleedit
},'-',{
Text: ' Delete ',
ToolTip: ' Delete Record ',
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});

Get Department List
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
});

Employee Information Form
var empform = new Ext.formpanel ({
Frame:true,
LabelAlign: ' Right ',
LABELWIDTH:120,
WIDTH:450,
HEIGHT:250,
Items:new Ext.form.FieldSet ({
Title: ' Employee Information ',
Autoheight:true,
Defaults: {width:200},
DefaultType: ' TextField ',
Items: [New Ext.form.Hidden ({
Name: ' EmployeeID '
}),{
Fieldlabel: ' Name ',
Name: ' Cnname ',
Allowblank:false
},new Ext.form.ComboBox ({
Fieldlabel: ' Sex ',
Hiddenname: ' Sex ',
Store:new Ext.data.SimpleStore ({
Fields: [' value ', ' text '],
Data: [[1, ' Male '],[0, ' female ']]
}),
Valuefield: ' Value ',
Displayfield: ' Text ',
Typeahead:true,
Mode: ' Local ',
TriggerAction: ' All ',
Selectonfocus:true,
Allowblank:false
}), new Ext.form.NumberField ({
Fieldlabel: ' Age ',
Name: ' Age '
}), {
Fieldlabel: ' Email ',
Name: ' Email ',
VType: ' Email '
}, new Ext.form.DateField ({
Fieldlabel: ' Entry Time ',
Name: ' Onworkdate ',
Allowblank:false,
Format: "Y-m-d"
}), new Ext.form.ComboBox ({
Fieldlabel: ' Subordinate department ',
Name: ' Departmentname ',
Hiddenname: ' DepartmentID ',
Store:deptds,
Valuefield: ' DeptID ',
Displayfield: ' Deptname ',
Typeahead:true,
Mode: ' Remote ',
TriggerAction: ' All ',
Emptytext: ' Please select Department ',
Selectonfocus:true,
Allowblank:false
})
]
})
});

function Handleadd () {
var Addempwin = new Ext.window ({
Title: ' Add new employees ',
Layout: ' Fit ',
WIDTH:500,
HEIGHT:300,
Plain:true,
Items:empform,
Buttons: [{
Text: ' Save ',
Handler:addrecord
},{
Text: ' Cancel ',
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 (' Hint ', ' Please select a record! ');
}
else {
var Editempwin = new Ext.window ({
Title: ' Modify employee information ',
Layout: ' Fit ',
WIDTH:500,
HEIGHT:300,
Plain:true,
Items:empform,
Buttons: [{
Text: ' Save ',
Handler:updaterecord
},{
Text: ' Cancel ',
Handler:function () {
Editempwin.hide ();
}
}]
});
Editempwin.show (this);
Ext.MessageBox.alert ("hint", selectedkeys);
Deptds.load (); Get a list of departments
var request = {Empid:selectedkeys[0]};
Ext.MessageBox.show ({
Msg: ' Requesting data, please wait ',
Progresstext: ' Requesting data ',
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 would 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 ("failed, please try again", 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 ("Warning", "Unexpected error!") Please contact the Administrator! ");
},
Success:function (response,options) {
Ext.MessageBox.hide ();
}
})/End Ajax Request
}
}
function UpdateRecord (BTN)
{
if (EmpForm.form.isValid ()) {
Btn.disabled=true;
Ext.MessageBox.show ({
Msg: ' Requesting data, please wait ',
Progresstext: ' Requesting data ',
WIDTH:300,
Wait:true,
Waitconfig: {interval:200}
});
var formvalue = EmpForm.form.getValues ();
var request = {Emp:convertformvalue (formvalue, ' onworkdate ')};
Ext.MessageBox.alert ("hint", 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 would be true if the request succeeded
Ext.MessageBox.hide ();
var alertcontent=convertresponsetext (Response.responsetext, "", True,false);
Ext.MessageBox.alert ("Success", alertcontent);
} else {
Ext.MessageBox.hide ();
Ext.MessageBox.alert ("failed, please try again", 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 ("Warning", "Unexpected error!") Please contact the Administrator! ");
},
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: ' Requesting data, please wait ',
Progresstext: ' Requesting data ',
WIDTH:300,
Wait:true,
Waitconfig: {interval:200}
});
var formvalue = EmpForm.form.getValues ();
var request = {Emp:convertformvalue (formvalue, ' onworkdate ')};
Ext.MessageBox.alert ("hint", 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 would be true if the request succeeded
Ext.MessageBox.hide ();
var alertcontent=convertresponsetext (Response.responsetext, "", True,false);
Ext.MessageBox.alert ("Success", alertcontent);
} else {
Ext.MessageBox.hide ();
Ext.MessageBox.alert ("failed, please try again", 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 ("Warning", "Unexpected error!") Please contact the Administrator! ");
},
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 (' Hint ', ' Are you sure you want to delete the selected record? ', DeleteRecord);
}
Else
{
Ext.MessageBox.alert (' Hint ', ' Please select at least one record! ');
}//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: ' Requesting data, please wait ',
Progresstext: ' Requesting data ',
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 would be true if the request succeeded
Ext.MessageBox.hide ();
var alertcontent=convertresponsetext (Response.responsetext, "", False,false);
Ext.MessageBox.alert ("Success", alertcontent);
} else {
Ext.MessageBox.hide ();
Ext.MessageBox.alert ("failed, please try again", 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 ("Warning", "Unexpected error!") Please contact the Administrator! ");
},
Success:function (response,options) {
Ext.MessageBox.hide ();
Store.reload ();
}
})/End Ajax Request
}//end If click ' Yes ' on button
}//End DeleteRecord

});