1 Ext.create("Ext.grid.Panel", { 2 title: "userInfo", 3 store: Ext.data.StoreManager.lookup("userInfoStore"), 4 columns: [ 5 { header: "UserName", dataIndex: "UserName", flex: 1 }, 6 { header: "Phone", dataIndex: "Phone", flex: 1 }, 7 { header: "Eamil", dataIndex: "Eamil", flex: 1 }, 8 { header: "QQ", dataIndex: "QQ", flex: 1 }, 9 { header: "Addr", dataIndex: "Addr", flex: 1 }, 10 { header: "Department", dataIndex: "Department", flex: 1 } 11 ], 12 features: [{ ftype: 'grouping'}], 13 width: 600, 14 heigth: 400, 15 renderTo: Ext.getBody() 16 }); 17 });
前台extjs代码：
Ext.onReady(function () {
1.定义userInfo类
1 Ext.define("userInfo", { 2 extend: "Ext.data.Model", 3 fields: [ 4 { name: "UserName", type: "string" }, 5 { name: "Phone", type: "string" }, 6 { name: "Eamil", type: "string" }, 7 { name: "QQ", type: "string" }, 8 { name: "Addr", type: "string" }, 9 { name: "Department", type: "string"}] 10 });
2.定义store用来装后台返回到前台的数据，并作为Ext.grid.Panel的数据源
1 var store = Ext.create("Ext.data.Store", { 2 storeId: "userInfoStore", 3 model: "userInfo", 4 groupField: "Department", //store数据通过Department进行分组存储 5 autoLoad: true, 6 proxy: { 7 type: "ajax", 8 url: "test2.aspx", 9 reader: { 10 type: "xml", 11 record: "Table"//表明xml的有效数据从哪里开始 12 } 13 } 14 });
3.创建Ext.grid.Panel进行数据的分组显示
后台数据的获取（这里定了一个中间类）
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data.SqlClient; 6 using System.Data; 7 using System.Web.Configuration; 8 9 /// <summary> 10 ///test 的摘要说明 11 /// </summary> 12 public class testCs 13 { 14 private SqlConnection con = null; 15 private DataSet ds = null; 16 private SqlCommand cmd = null; 17 private string connStr = string.Empty; 18 private SqlDataAdapter da = null; 19 public testCs() 20 { 21 connStr = WebConfigurationManager.ConnectionStrings["OMSDB"].ConnectionString; 22 } 23 private void CloseConnection() 24 { 25 if (con.State == ConnectionState.Open) 26 { 27 con.Close(); 28 } 29 } 30 private void OpenConnection() 31 { 32 if (con.State == ConnectionState.Closed) 33 { 34 con.Open(); 35 } 36 } 37 public DataSet GetData(string sql) 38 { 39 using (con = new SqlConnection(connStr)) 40 { 41 using (da = new SqlDataAdapter(sql, con)) 42 { 43 try 44 { 45 ds = new DataSet(); 46 OpenConnection(); 47 da.Fill(ds); 48 return ds; 49 } 50 catch (Exception ex) 51 { 52 throw new Exception(ex.Message, ex); 53 } 54 finally 55 { 56 CloseConnection(); 57 } 58 } 59 } 60 } 61 }
服务器页面的后台代码：
1 Response.ContentType = "application/xml;charset=utf-8";//一定要记得设置这个，因为默认的情况是以html格式返回的 2 testCs getdata = new testCs(); 3 ds = new DataSet(); 4 ds = getdata.GetData("SELECT UserName,Phone,Eamil,QQ,Addr,Department FROM dbo.TEST_TB"); 5 Response.Write(ds.GetXml());
