Ext4.0之Panel

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就不会显示头部