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代码：
<link rel="stylesheet" type="text/css" href="js/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
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,
width: 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>
