Ext. Net dynamically loads multiple headers and ext.net dynamically Loads
The results are as follows:
Aspx page code:
<% @ Register Assembly = "Ext. Net" Namespace = "Ext. Net" TagPrefix = "ext" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head id = "Head1" runat = "server">
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/>
<Title> data presentation (version 3) </title>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Ext: ResourceManager ID = "ResourceManager1" runat = "server"/>
<Ext: gridPanel ID = "gpList" runat = "server" Title = "" IconCls = "icon-grid" AnimCollapse = "false" Collapsible = "true" SortableColumns = "true" AutoHeight =" true "Width =" 3000 ">
<Store>
<Ext: Store ID = "StoreAll" runat = "server" OnRefreshData = "MyData_Refresh">
<Model>
<Ext: Model ID = "Model1" runat = "server">
<Fields>
</Fields>
</Ext: Model>
</Model>
</Ext: Store>
</Store>
<ColumnModel ID = "ColumnModel1" runat = "server">
<Columns>
</Columns>
</ColumnModel>
<SelectionModel>
<Ext: RowSelectionModel ID = "RowSelectionModel1" runat = "server" PruneRemoved = "false" Mode = "Multi"/>
</SelectionModel>
</Ext: GridPanel>
</Form>
</Body>
</Html>
Aspx. cs file code:
If (! IsPostBack)
{
// Clear old data and record set
This. StoreAll. Reader. Clear ();
This. gpList. SelectionModel. Clear ();
This. gpList. ColumnModel. Columns. Clear ();
This. StoreAll. Model. Clear ();
DataTable dtProject = new PerforBLL (). GetData (); // data read from the database
// Data Source
DataTable results = new DataTable ();
Results. Columns. Add ("Name ");
// Dataset Store
Model extModel = new Model ();
ExtModel. Fields. Add (new ModelField ("Name", ModelFieldType. String ));
// Column data displayed
List <ColumnBase> extColumnBaseList = new List <ColumnBase> ();
ExtColumnBaseList. Add (new RowNumbererColumn () {ID = "RowNumbererColumn1", Width = 25 });
ExtColumnBaseList. Add (new Column () {ID = "cName", Text = "Name", Width = 300, DataIndex = "Name "});
Column wZJ = new Column () {ID = "cWHZ", Text = "summary "};
ExtModel. Fields. Add (new ModelField ("W-T", ModelFieldType. Float ));
ExtModel. Fields. Add (new ModelField ("W-P", ModelFieldType. Float ));
If (! Results. Columns. Contains ("W-T") results. Columns. Add ("W-T ");
If (! Results. Columns. Contains ("W-P") results. Columns. Add ("W-P ");
WZJ. Columns. Add (new Column ()
{
Text = "time ",
Width = 50,
DataIndex = "W-T ",
Sortable = true
});
WZJ. Columns. Add (new Column ()
{
Text = "cost ",
Width = 50,
DataIndex = "W-P ",
Sortable = true
});
ExtColumnBaseList. Add (wZJ );
// Dynamically send data
Foreach (DataRow drProject in dtProject. Rows)
{
DataRow dr = results. NewRow ();
Dr ["Name"] = drProject ["Name"];
Dr ["W-T"] = 0;
Dr ["W-P"] = 0;
Results. Rows. Add (dr );
}
This. StoreAll. Model. Add (extModel );
This. gpList. ColumnModel. Columns. AddRange (extColumnBaseList );
This. StoreAll. DataSource = results;
This. StoreAll. DataBind ();
This. gpList. Render ();
}
Use Ajax to obtain the header configuration from the background, and then construct a table.
Can I add multiple headers to treegrid in Extjs?
Yes. You must use a plug-in before version 4.0 (forgot what it is called). You can use the plug-in after version 4.0. There are examples on the Internet and on the official website.
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
