Ext.Net-GridPanel基础使用方法一

Step1.在页面加入ResourceManager控件

1.     <ext:ResourceManager ID="ResourceManager1" runat="server">
   
2.     </ext:ResourceManager>

Step2.编写Ext 数据源

1.     <ext:Store ID="store" runat="server">
   
2.         <Reader>
   
3.             <ext:JsonReader>
   
4.                 <Fields>
   
5.                     <ext:RecordField Name="ID"></ext:RecordField>
   
6.                     <ext:RecordField Name="name"></ext:RecordField>
   
7.                     <ext:RecordField Name="tel"></ext:RecordField>
   
8.                     <ext:RecordField Name="Creattime"></ext:RecordField>
   
9.                     <ext:RecordField Name="person"></ext:RecordField>
   
10.                     <ext:RecordField Name="ware"></ext:RecordField>
    
11.                 </Fields>
    
12.             </ext:JsonReader>
    
13.         </Reader>
    
14.     </ext:Store>

 

后台cs文件，数据源绑定方法

1.             DataTable dt = DBHelper.GetDatatable(sql);
   
2.             this.store.DataSource = dt;
   
3.             this.store.DataBind();
   

Step3.UI  Grid的画写

1. <ext:GridPanel ID="gdData" runat="server" Width="600" Height="600" StoreID="store" Border="false">                         
   
2.   <ColumnModel>
   
3.                                 <Columns>
   
4.                                     <ext:Column DataIndex="name" Header="换热站名称"></ext:Column>
   
5.                                     <ext:Column DataIndex="tel" Header="联系方式"></ext:Column>
   
6.                                     <ext:Column DataIndex="Creattime" Header="创建时间">
   
7.                                         <Renderer Handler="return sub((value))" />
   
8.                                     </ext:Column>
   
9.                                     <ext:Column DataIndex="person" Header="所属人"></ext:Column>
   
10.                                     <ext:Column DataIndex="ware" Header="所属区域"></ext:Column>
    
11.                                 </Columns>
    
12.                             </ColumnModel>
    
13.                         </ext:GridPanel>
    

这是一个最基础的gridPanel显示数据