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就不會顯示頭部