Ext.onReady(function () {
var categoryID = Ext.getDom("hfCategoryID").value;
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['ID', 'CategoryID', 'Name', 'Perchaser', 'Time', 'Weight', 'Price', 'Unit'],
autoLoad:true,
proxy: { type: 'ajax',
url: 'FinancialDetailData.aspx?CategoryID=' + categoryID,
reader: { type: 'json', root: 'items'}
}
});
Ext.create('Ext.grid.Panel', {
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: '名称', dataIndex: 'Name', flex:1
}, {
header: '购买者', dataIndex: 'Perchaser', flex: 1
}, {
header: '购买时间', dataIndex: 'Time', flex:1
}, {
header: '重量', dataIndex: 'Weight'
}, {
header: '价格', dataIndex: 'Price'
}, {
header: '单位', dataIndex: 'Unit'
}],
renderTo: "div1"
});
});
首先我们创建一个Store来存储数据,指定数据读取器为json。通过ajax方式从后台获取json数据。
后台代码如下:
public partial class FinancialDetailData : System.Web.UI.Page
{
private int CategoryID
{
get
{
string id = this.Request.QueryString["CategoryID"];
return int.Parse(id);
}
}
private List<FinancialItemInfo> GetFinancailItemByCategoryID(int categoryID)
{
FinancialItemBLL financialItemBLL = new FinancialItemBLL();
List<FinancialItemInfo> financialItemList = financialItemBLL.GetListByCategoryID(categoryID);
return financialItemList;
}
private string GetJson(List<FinancialItemInfo> itemList)
{
StringBuilder json = new StringBuilder();
foreach (FinancialItemInfo info in itemList)
{
json.Append(JsonConvert<FinancialItemInfo>.ObjectToJson(info));
json.Append(",");
}
string financialItemjson = json.ToString();
return financialItemjson.TrimEnd(',');
}
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
int id = CategoryID;
List<FinancialItemInfo> itemList = GetFinancailItemByCategoryID(CategoryID);
string itemJson = GetJson(itemList);
StringBuilder str = new StringBuilder();
str.Append(@"{""items"":");
str.Append(@"[");
str.Append(itemJson);
str.Append(@"]");
str.Append(@"}");
Response.Write(str.ToString());
Response.End();
}
}
JsonConvert类用来把一个对象转换为json序列。也可以使用NET自带的序列化对象DataContractJsonSerializer,但是这个对象转换DateTime类型的数据时,转换的数据格式可能并不是我们想要的。
我们可以通过设置Panel的title属性来显示Penal的头部,如果不设置title属性,Panel就不会显示头部