Ext.net Learning notes 16:ext.net Gridpanel folding/Expanding lines

Source: Internet
Author: User

Ext.net Learning notes 16:ext.net Gridpanel folding/Expanding lines

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/unwinding

This 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 server

Normally 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.