Home > Developer > Web Develop
Ext.net Gridpanel's line supports the collapse/expand function, this function is also said to be useful, especially when the data contains images and other content.
Here's a look at the effect:
With the line collapse/expand feature, an expand icon appears in the Ext.net Gridpanel's outfit, which you can then expand by clicking on the icon:
Using Xtemplate to implement row folding/unwindingThis is the simplest implementation, and we only need to add the following code to the definition of Gridpanel:
<Plugins> <Ext:RowexpanderRunat= "Server" > <TemplateRunat= "Server" > <Html> <B>Name:</B><Span>{Name}</Span> <Br></br> <b></b><span>{Age}< Span style= "color:blue;" ></span> </Html< Span style= "color:blue;" >> </> </ ext:rowexpander></plugins>
This uses the TPL, which contains what we want to display after the expansion, the data is the current row of data.
Data displayed when the deployment is obtained from the serverNormally we don't get all the data to the client at once, but instead get the data to be displayed on demand by loading it asynchronously
In Ext.net Gridpanel, if you want to get data from the server at deployment time, we need to complete the following code:
First step: To match the demo, add a time property to our model, and we'll go to the server side to get the current times asynchronously:
<Ext:ModelId= "Userinfomodel"Runat= "Server"Idproperty= "ID" > <Fields> <Ext:ModelfieldName= "ID"Type= "Int" ></Ext:Modelfield> <Ext:ModelfieldName= "Name"Type= "String" ></Ext:Modelfield> <Ext:ModelfieldName= "Gender"Type= "String" ></Ext:Modelfield> <Ext:ModelfieldName= "Age"type= "Int" ></ext:modelfield> < ext:modelfield name= "Time" type= "String" > </ext:ModelField > </fields></ ext:model >
Step Two: Modify our Rowexpander definition, we need to define the template under the bin and add events for Rowexpander:
<Bin> <Ext:XtemplateRunat= "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:RowexpanderRunat= "Server" > <Listeners> <ExpandHandler= "Myapp.onexpand (Record.data, #{tpldetail}, #{ctdetail})" ></expand> </listeners > <component> < Ext:container runat= "Server" =" Ctdetail "/> </ component> </ext< Span style= "color:blue;" >:rowexpander></ Plugins>
Step three: Define the server-side Directmethod method:
[Directmethod]getdetail (DateTime. Now.tostring ("Yyyy-mm-dd HH:mm:ss");} Fourth step: Define the Expand method for the client:
MyApp = { (data, template, container) { return}});}; With these steps above, we have completed the function of getting and displaying asynchronously.
Ext.net Learning notes 16:ext.net Gridpanel folding/Expanding lines
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
