GridPanel collapse/expand rows
Ext. Net GridPanel supports the fold/expand function. This function is useful, especially when data contains images and other content.
Let's take a look at the effect:
After the row collapse/expand function is used, an expand icon will appear in the row header of Ext. Net GridPanel. Click the icon to expand the row:
This is the simplest implementation. In the previous article: [Ext. net learning notes] 05: Ext. based on the code in Net GridPanel usage (including Filter, Sorter, Grouping, and Summary), we add the following code in the definition of GridPanel:
<Plugins> <ext: RowExpander runat = "server"> <Template runat = "server"> <Html> <B> Name: </B> <span >{name }</span> <br> </br> <B> age: </B> <span> {Age} </span> </Html> </Template> </ext: RowExpander> </Plugins>
The Template is used here, which contains the content to be displayed after expansion. The data is the data of the current row.
Obtain the data displayed during expansion from the server
Generally, we do not obtain all the data to the client at a time, but asynchronously load the data to be displayed as needed.
In Ext. Net GridPanel, if you want to obtain data from the server during expansion, you need to complete the following code.
Step 1: in combination with the demo, add a Time attribute for our Model. We get the current Time from the server in an asynchronous way:
<ext:Model ID="UserInfoModel" runat="server" IDProperty="ID"> <Fields> <ext:ModelField Name="ID" Type="Int"></ext:ModelField> <ext:ModelField Name="Name" Type="String"></ext:ModelField> <ext:ModelField Name="Gender" Type="String"></ext:ModelField> <ext:ModelField Name="Age" Type="Int"></ext:ModelField> <ext:ModelField Name="Time" Type="String"></ext:ModelField> </Fields></ext:Model>
Step 2: modify our RowExpander definition. we need to define the Template under Bin and add events for RowExpander:
<Bin> <ext: XTemplate runat = "server" ID = "tplDetail"> <Html> <B> Name: </B> <span >{name }</span> <br> </br> <B> age: </B> <span> {Age} </span> <br> </br> <B> time: </B> <span> {Time} </span> </Html> </ext: XTemplate> </Bin> <Plugins> <ext: rowExpander runat = "server"> <Listeners><Expand Handler = "MyApp. onExpand (record. data, # {tplDetail}, # {ctDetail})"> </Expand></Listeners> <Component> <ext: Container runat = "server" ID = "ctDetail"/> </Component> </ext: RowExpander> </Plugins>
Step 3: Define the DirectMethod method on the server:
[DirectMethod]public static string GetDetail(string name){ return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");}
Step 4: Define the Expand method of the client:
var MyApp = { onExpand: function (data, template, container) { if (data.Time) return; App.direct.GetDetail(data.Name, { success: function (time) { data.Time = time; template.overwrite(container.getEl(), data); }, eventMask : { showMask : true } } ); }};
Through the above steps, we have completed the asynchronous acquisition and display function. The effect is as follows:
GridPanel SelectionNext is another function of the GridPanel of Ext. Net: select.
In our initial usage of GridPanel, we have seen how to use the Selection function. Today, we will introduce the Selection function of Ext. Net GridPanel in more detail.
Ext. Net GridPanel Selection includes three types:
By default, GridPanel uses RowSelectionModel for single choice. If you want GridPanel to be able to select multiple items, you must add the following attributes to GridPanel:
<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200" MultiSelect="true">
Next, let's take a look at the usage of these three models.
RowSelectionModelThe effect is as follows:
Implementation Code:
<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200" MultiSelect="true">
In RowSelectionModel configuration, the attribute Mode indicates the selected type, which is Single (Single choice), Multi (multiple choice), and Simple (Simple multiple choice)
The difference between single-choice and Multi-choice is obvious. Let's look at the difference between Multi and Simple:
CheckboxSelectionModel
Effect
The Code is as follows:
<ext:CheckboxSelectionModel runat="server" Mode="Multi" InjectCheckbox="1"></ext:CheckboxSelectionModel>
The Mode attribute has the same function as the Mode attribute in RowSelectionModel.
The InjectCheckbox attribute is used to determine the position (column number) of the Checkbox column. The default value is 0, starting from column 0th.
CellSelectionModel
Effect
The Code is as follows:
<ext:CellSelectionModel runat="server"></ext:CellSelectionModel>
I tried it. It seems that only one cell can be selected.
After checking the ExtJS API, we found that only one cell can be selected. It also has a Mode attribute, but this attribute has only one available value: Single.
The client obtains the selected value.
As this series focuses on server-side processing, the Code is as follows:
var selectedRows = grid.getSelectionModel().getSelection();
Grid is our GridPanel. It is preferred to obtain its selection model. After obtaining the model, you can obtain the selected content from the selection model.
The server obtains the selected value.
For the server side, we can use the same idea to obtain the selected value.
Var selectionModel = grid. getSelectionModel () as RowSelectionModel; if (selectionModel. selectedRows. count = 0) {X. messageBox. alert ("prompt", "No selected rows "). show (); return;} string ids = string. empty; foreach (var item in selectionModel. selectedRows) {ids + = "," + item. recordID;} ids = ids. trim (','); X. messageBox. alert ("prompt", ids ). show ();
NOTE: If no IDProperty is set for the Model associated with the Store, the RecordID cannot be obtained.
The above code is for RowSelectionModel and CheckboxSelectionModel. If it is CellSelectionModel, we can also get the cell value and other content:
Var cellModel = grid. getSelectionModel () as CellSelectionModel; // obtain the record IDvar recordId = cellModel. selectedCell. recordID; // obtain the cell value var cellValue = cellModel. selectedCell. value; // obtain the column name var columnName = cellModel. selectedCell. name; // obtain the column number var columnIndex = cellModel. selectedCell. colIndex; // obtain the row number var rowIndex = cellModel. selectedCell. rowIndex;
Editable GridPanel
Ext. Net GridPanel has two editing modes: Edit cells and edit rows.
Cell Editing:
Row Editing:
As you can see, when you edit a cell, only the cell enters the editing mode, while in the row editing mode, all the Editable fields of the edit row are uniformly edited.
To edit Ext. Net GridPanel, perform the following two steps:
Configure the Grid column editing ControlIn our example, only the name and age are edited. The name uses the TextField control and the age uses the NumberField control. The column configuration is as follows:
<ColumnModel> <Columns> <ext: RowNumbererColumn ID = "RowNumbererColumn1" runat = "server"> </ext: RowNumbererColumn> <ext: column runat = "server" ID = "columnID" Width = "100" Text = "ID" DataIndex = "ID"> </ext: Column> <ext: column runat = "server" ID = "columnName" Width = "200" Text = "Name" DataIndex = "Name"> <Editor> <ext: textField runat = "server"> </ext: TextField> </Editor> </ext: Column> <ext: column runat = "server" ID = "columnGender" Width = "50" Text = "Gender" DataIndex = "Gender"> </ext: Column> <ext: numberColumn runat = "server" ID = "columnAge" Width = "60" Text = "Age" DataIndex = "Age" Format = ""> <Editor> <ext: numberField runat = "server" MinValue = "18" MaxValue = "150"> </ext: NumberField> </Editor> </ext: numberColumn> </Columns> </ColumnModel>Configure the Grid editing plug-in
There are two Grid editing plug-ins in ExtJS. We will post the code.
Cell Editing:
<Plugins> <ext:CellEditing runat="server" ClicksToEdit="1"></ext:CellEditing></Plugins>
Row Editing:
<Plugins> <ext:RowEditing runat="server" ClicksToEdit="1"></ext:RowEditing></Plugins>
With the above two configurations, we can use the Edit function of Ext. Net GridPanel.
Source:
Ext. Net study notes 16: Ext. Net GridPanel folding/expanding rows
Ext. Net Study Notes 17: Ext. Net GridPanel Selection
Ext. Net study notes 18: Ext. Net editable GridPanel
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
