extjs使用gridPanel演示基于asp.net使用json传送数据

先编写一个aspx页面用于从数据库生成json数据之用,暂取名叫getData.aspx

protected void btnToJSONString_Click(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection();
        con.ConnectionString = "Data Source=.;Initial Catalog=Northwind;Integrated Security=True";
        var cmd = new SqlCommand();
        cmd.Connection = con;
        cmd.CommandText = "select * from Products";
        var da = new SqlDataAdapter();
        da.SelectCommand = cmd;
        var ds = new DataSet();
        da.Fill(ds,"Products");
        var dt = new DataTable();
        dt = ds.Tables["Products"];
        Response.Write(JsonConvert.SerializeObject(dt));

}

//////////////////////////////////////////////////////////////////////////////////////////////////

接着，编写另一个aspx,在基中插入如下js代码：

Ext.onReady(function () {
    var proxy1 = new Ext.data.HttpProxy({ url: "getData.aspx" });
    var ds = new Ext.data.Store({
        url: "getData.aspx",
        reader: new Ext.data.JsonReader({},
        [{
            name: "ProductID",
            mapping: "ProductID"
        },
        {
            name: "ProductName",
            mapping: "ProductName"
        },
        {
            name: "Chai",
            mapping: "Chai"
        },
        {
            name: "SupplierID",
            mapping: "SupplierID"
        },
        {
            name: "CategoryID",
            mapping: "CategoryID"
        },
        {
            name: "QuantityPerUnit",
            mapping: "QuantityPerUnit"
        }, ])
    });
    ds.load();

    var cm = new Ext.grid.ColumnModel([{
            header: 'ProductID', dataIndex: 'ProductID'
        },
        {
            header: 'ProductName',
            dataIndex: 'ProductName'
        },
        {
            header: 'Chai',
            dataIndex: 'Chai'
        }
    ]);
    var grid = new Ext.grid.GridPanel({
        title: "Products table",
        height: 550,
        800,
        ds: ds,
        columns: [new Ext.grid.RowNumberer(), {
            header: 'ProductID', dataIndex: 'ProductID'
        },
        {
            header: 'ProductName', dataIndex: 'ProductName'
        },
        {
            header: 'Chai', dataIndex: 'Chai'
        },
        {
            header: 'SupplierID', dataIndex: 'SupplierID'
        },
        {
            header: 'CategoryID', dataIndex: 'CategoryID'
        },
        {
            header: 'QuantityPerUnit', dataIndex: 'QuantityPerUnit'
        }],
        autoScroll: true,
        loadMask: {
            msg: '正在加载数据，请稍侯……'
        }

    });
    grid.render(document.body);
});
    </script>
</head>
<body>
    <div id = "hello"></div>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>