Main Purpose
A. Mastering the methods to get the values of each field in the Gridpanel current row
B. Master how to pass the foreground data to the background and return the background operation results to the foreground
C. Mastering how to obtain and set text values for button and TextField controls
Main Content
A. We first add three ext components to the page: store, Menu,gridpanel
B. Set the contextmenuid of Gridpanel to the ID of the menu control to add a right-click menu for Gridpanel
Copy Code code as follows:
<ext:store id= "Store1" runat= "Server"
onbeforestorechanged= "Store1_beforestorechanged" >
<Reader>
<ext:jsonreader readerid= "id" >
<fields >
<ext:recordfield name= "id" type= "Int" ></ext:RecordField>
<ext:recordfield name= "UID" type= "String" ></ext:RecordField>
<ext:recordfield name= "uname" type= "String" ></ext:RecordField>
<ext:recordfield name= "Uage" type= "Int" ></ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
The Readerid can be set without setting, and you can use the method Gridpanel1.getselectionmodel (). getselected (). ID to get the value of the row ID field.
The premise of using this method is to set its selection in Gridpanel as row selection mode, and the code will be posted later. Name corresponds to the name of the field in the database table.
Copy Code code as follows:
<ext:menu id= "Menu1" runat= "Server" >
<Items>
<ext:menuitem id= "MenuItem1" runat= "Server" text= "View user Information" >
<Listeners>
<click fn= "Showuserinfo"/>
</Listeners>
</ext:MenuItem>
<ext:menuitem id= "MenuItem2" runat= "Server" text= "Modify user Information" >
<Listeners>
<click fn= "Showuserinfo"/>
</Listeners>
</ext:MenuItem>
<ext:menuitem id= "MenuItem3" runat= "Server" text= "Add user Information" >
<Listeners>
<click fn= "Showuserinfo"/>
</Listeners>
</ext:MenuItem>
<ext:menuitem id= "MENUITEM4" runat= "server" text= "Delete user Information" >
<Listeners>
<click fn= "Deleteuserinfo"/>
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
The effect is as follows:
C. Set Gridpanel StoreID as the ID of the store control and add a data source for Gridpanel
Gridpanel source code is as follows:
Copy Code code as follows:
<ext:gridpanel id= "GridPanel1" runat= "Server" contextmenuid= "Menu1" autoheight= "true" width= "400px"
Autodatabind= "true" storeid= "Store1" >
<columnmodel id= "Ctl10" >
<Columns>
<ext:column dataindex= "id" header= "user number" >
<preparecommand args= "grid, record, RowIndex, columnindex, value"/>
</ext:Column>
<ext:column dataindex= "UID" header= "User name" >
<preparecommand handler= "" args= "Grid,command,record,row,col,value" formathandler= "False" ></ Preparecommand>
</ext:Column>
<ext:column dataindex= "uname" header= "user nickname" >
<preparecommand handler= "" args= "Grid,command,record,row,col,value" formathandler= "False" ></ Preparecommand>
</ext:Column>
<ext:column dataindex= "uage" header= "User Age" >
<preparecommand handler= "" args= "Grid,command,record,row,col,value" formathandler= "False" ></ Preparecommand>
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:rowselectionmodel runat= "Server" id= "ctl09" ></ext:RowSelectionModel>
</SelectionModel>
<loadmask showmask= "true" msg= "data is loading ..."/>
<Listeners>
<cellclick fn= "Showuserinfo"/>
</Listeners>
</ext:GridPanel>
Here are a few notes
First, the parameters passed by the Cellclick event can be passed according to the parameters set in the PrepareCommand Args, such as grid, command, record, Row,col, value
Secondly, the Selectionmodel node in this site is to be used Rowselectionmodel
D. foreground ExtJS script is as follows:
Copy Code code as follows:
function Showuserinfo (menu, E) {
var id = Gridpanel1.getselectionmodel (). getselected (). id;//the value set by the Readerid in the ID jsonreader here
var record = Gridpanel1.getselectionmodel (). getselected (); Gets the currently selected entire record, if it must be set to row selection mode
View more information
if (menu.id = = ' MenuItem1 ') {
Openuserinfowindow (record, 0); defined in the Objectinfo.ascx page
}
Modify Information
else if (menu.id = = ' MenuItem2 ') {
Openuserinfowindow (record, 1);
}
Add information
else if (menu.id = = ' MenuItem3 ') {
Openuserinfowindow (record, 2);
}
else {
}
}
For the script, one thing to say is that it calls the Openuserinfowindow method, which is defined in the page of a user control, which can be called after this page uses the control.
Space page source code is as follows:
Note: <%= ctrid.clientid> user gets server-side component objects
Copy Code code as follows:
function Openuserinfowindow (record,id) {
<%= Button2.clientid%>.hide (null);
<%= Txtid.clientid%>.setvalue (record.data.id);
<%= Txtname.clientid%>.setvalue (RECORD.DATA.UID);
<%= Txtnc.clientid%>.setvalue (record.data.uname);
<%= Txtage.clientid%>.setvalue (record.data.uage);
if (id==1)
{
<%= button1.clientid%>.settext (' modification '); For the button, use text when the value is taken, set with SetText ();
<%= Txtid.clientid%>.hide (null);
<%= Button2.clientid%>.show (null);
}
if (id==0)
{
}
if (id==2)
{
<%= Txtid.clientid%>.setvalue (");
<%= Txtname.clientid%>.setvalue (");
<%= Txtnc.clientid%>.setvalue (");
<%= Txtage.clientid%>.setvalue (");
<%= Txtid.clientid%>.hide (null);
<%= button1.clientid%>.value= "Add";
}
<%= Window1.clientid%>.show ();
}
The code to delete the user is as follows:
Copy Code code as follows:
function Deleteuserinfo () {
Ext.Msg.confirm (' hint ', ' OK to delete user? ', function (BTN) {
if (btn = = ' yes ') {
var record = Gridpanel1.getselectionmodel (). getselected ();
Gridpanel1.getstore (). Remove (record);//The record is null if the method is written in a callback function after the background deletion is successful
The user may just click on the Gridpanel, but there is no selected row, at which point the record value is null
if (record = = null) {
Ext.Msg.alert (' Hint ', ' Please select a certain record! ');
Return
}
Coolite.AjaxMethods.DeleteUserInfo (Record.data.id.toString (), {
Success:function () {
Ext.Msg.alert (' Hint ', ' delete success! ');
}
});
}
else {
Return
}
});
}
Please pay special attention to the use of the Coolite.AjaxMethods.DeleteUserInfo method, the first parameter is fetched in the foreground and passed to the server-side parameters, and the second is the callback function.
The background deletion code is implemented as follows:
Copy Code code as follows:
[Ajaxmethod]
public void Deleteuserinfo (string id)
{
String deletestring = "Delete from T_user where id=" + ID;
Sqldb. Executeupdate (deletestring);
}
Special attention
The addition of this page, the modification function is not implemented, only provides a pattern, but use and delete is the same.
Learning experience
If you do not know what event pass the number and type of parameters, you can write a wrong way, and then debug the time to analyze meaningful parameters.
Question: When implementing the Delete, when implementing the refresh, when implementing the modification, I do not have to read the data from the database and then bind to the store, but by refreshing the store or Gridpanel to implement
