Main purpose
a. Master the method of obtaining the values of each field in the current row of GridPanel
b. Master how to pass the foreground data to the background and return the background operation results to the foreground
c. Learn how to get and set the text values of button and textField controls
Main content
a. Let’s first add three ext components to the page: store, menu, gridpanel
b. Set the contextmenuID of gridpanel to the ID of the menu control, thereby adding a right-click menu to the GridPanel
The code copy is 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 here can be not set. If set, you can use the method GridPanel1.getSelectionModel().getSelected().id to get the value corresponding to the id field of the row.
The prerequisite for using this method is to set its selection method to row selection mode in the GridPanel, and the code will be posted later. Name corresponds to the field name in the database table.
The code copy is 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 effects are as follows:
c. Set the storeID of gridPanel to the ID of the store control and add a data source for the gridpanel
The source code of GridPanel is as follows:
The code copy is 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>