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

 

 Ext.create("Ext.grid.Panel", {
                title: "userInfo",
                store: Ext.data.StoreManager.lookup("userInfoStore"),
                columns: [
                            { header: "UserName", dataIndex: "UserName", flex: 1 },
                            { header: "Phone", dataIndex: "Phone", flex: 1 },
                            { header: "Eamil", dataIndex: "Eamil", flex: 1 },
                            { header: "QQ", dataIndex: "QQ", flex: 1 },
                            { header: "Addr", dataIndex: "Addr", flex: 1 },
                            { header: "Department", dataIndex: "Department", flex: 1 }
                            ],
                features: [{ ftype: 'grouping'}],
                width: 600,
                heigth: 400,
                renderTo: Ext.getBody()
            });
        });

 

 

前台extjs代码：

 Ext.onReady(function () {

 

  1.定义userInfo类

           

 Ext.define("userInfo", {
                extend: "Ext.data.Model",
                fields: [
                { name: "UserName", type: "string" },
                { name: "Phone", type: "string" },
                { name: "Eamil", type: "string" },
                { name: "QQ", type: "string" },
                { name: "Addr", type: "string" },
                { name: "Department", type: "string"}]
            });

 

  2.定义store用来装后台返回到前台的数据，并作为Ext.grid.Panel的数据源

 　　

 var store = Ext.create("Ext.data.Store", {
                storeId: "userInfoStore",
                model: "userInfo",
                groupField: "Department", //store数据通过Department进行分组存储
                autoLoad: true,
                proxy: {
                    type: "ajax",
                    url: "test2.aspx",
                    reader: {
                        type: "xml",
                        record: "Table"//表明xml的有效数据从哪里开始
                    }
                }
            });

 

           

  3.创建Ext.grid.Panel进行数据的分组显示

           

后台数据的获取（这里定了一个中间类）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Web.Configuration;
 
/// <summary>
///test 的摘要说明
/// </summary>
public class testCs
{
    private SqlConnection con = null;
    private DataSet ds = null;
    private SqlCommand cmd = null;
    private string connStr = string.Empty;
    private SqlDataAdapter da = null;
    public testCs()
    {
        connStr = WebConfigurationManager.ConnectionStrings["OMSDB"].ConnectionString;
    }
    private void CloseConnection()
    {
        if (con.State == ConnectionState.Open)
        {
            con.Close();
        }
    }
    private void OpenConnection()
    {
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }
    }
    public DataSet GetData(string sql)
    {
        using (con = new SqlConnection(connStr))
        {
            using (da = new SqlDataAdapter(sql, con))
            {
                try
                {
                    ds = new DataSet();
                    OpenConnection();
                    da.Fill(ds);
                    return ds;
                }
                catch (Exception ex)
                {
                    throw new Exception(ex.Message, ex);
                }
                finally
                {
                    CloseConnection();
                }
            }
        }
    }
}

 

服务器页面的后台代码：

  Response.ContentType = "application/xml;charset=utf-8";//一定要记得设置这个，因为默认的情况是以html格式返回的
        testCs getdata = new testCs();
        ds = new DataSet();
        ds = getdata.GetData("SELECT UserName,Phone,Eamil,QQ,Addr,Department FROM dbo.TEST_TB");
        Response.Write(ds.GetXml());

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