Ext.grid.Panel 从后台获取数据源和数据格式详解

 

 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());

转：http://blog.sina.com.cn/s/blog_62fda93c01016eet.html