接觸ExtJs不久一直以來都是DotNet陣營某天在網上看到Coolite就愛不釋手了但是用起來才知道不是那麼順手可能是剛剛接觸的原因網上的關於Coolite的資料更是少之又少了唯一能夠指望的只有Coolite官方的論壇雖然它的官方論壇牛人很多也通過論壇解決了不少問題但是總覺得都是一知半解的
首先我覺得記得幾個關鍵字屬性名都是其次的關鍵是理解弄懂控件對象的運行機制步驟順序才是重點
關於StoreGridPanel
GridPanel+Store的機制我認為是這樣的
）Store想要定制ID等基本屬性（呵呵這是廢話）其中<Reader>用來為讀取數據集而定義的數據結構
）結構的定義需要JsonReader對象（我常用這個JsonReader只是其中一種）
）<Fields>中包含N個字段對象<ext:RecordField>且必要的屬性如NAMETYPE等
）<SortInfo>是用來指定排序規則的
例<ext:Store ID=StoreInP runat=server WarningOnDirty=false>
<Reader>
<ext:JsonReader ReaderID=fSIPDId>
<Fields>
<ext:RecordField Name=fSIPDId />
<ext:RecordField Name=fSIPId />
<ext:RecordField Name=fPId />
<ext:RecordField Name=fBUId Type=int />
<ext:RecordField Name=fBUName />
<ext:RecordField Name=fPQuantity Type=int />
<ext:RecordField Name=fSBatch />
<ext:RecordField Name=fSPackQuantity Type=int DefaultValue= />
<ext:RecordField Name=fSSingleQuantity Type=int DefaultValue= />
<ext:RecordField Name=fTotalQuantity Type=int DefaultValue= />
</Fields>
</ext:JsonReader>
</Reader>
<SortInfo Field=fSIPDId />
</ext:Store>
說明
）WarningOnDirty 用來設定是否在數據發生改變時提示警告涉及兩個相關的屬性 DirtyWarningTitle=系統警告 DirtyWarningText=數據發生改變您未保存您確定要加載/刷新數據？從屬性值大家就能看出是做什麼用的了
）OnRefreshData 是個很主要的事件數據刷新事件如果Store對象中包含AutoLoad屬性並且值為TRUE的話將會在頁面加載是自動觸發該事件那麼我們就可以在後台為這個事件編寫諸如獲得數據庫中的記錄集綁定數據的操作例
protected void StoreInP_RefreshData(object sender CooliteExtWebStoreRefreshDataEventArgs e)
{
thisStoreInPDataSource = [dataset]\[datatable]\object[];//記錄集
thisStoreInPDataBind();
}
）注意一點設置AutoLoad為TRUE後想要給Store加上自動加載參數一般用於分頁功能比較常見如
<AutoLoadParams>
<ext:Parameter Name=start Mode=Raw Value= />
<ext:Parameter Name=limit Mode=raw Value= />
</AutoLoadParams>
在Store獲得數據以後GridPanel所要做的就是呈現了Gridpanel最簡單的呈現只需要設定屬性和添加<ColumnModel>集合必須的屬性如IDrunat=server StoreID為了使我們的Grid更加美觀可以使用TrackMouseOverBorder等屬性TrackMouseOver是給Grid實現鼠標在行經過時的軌跡效果Border給Grid加上圓角邊框例
<ext:GridPanel ID=GridOperator runat=server StripeRows=true TrackMouseOver=true Border=true StoreID=StoreOperator>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn />
<ext:Column Header=登陸名 DataIndex=fSOpLogId />
<ext:Column Header=姓名 DataIndex=fSOpName />
<ext:Column Header=性別 DataIndex=fSOpSex Width=>
<Renderer Fn=GridField_SexState />
</ext:Column>
<ext:Column Header=聯系電話 DataIndex=fSOpTel />
<ext:Column Header=加入時間 DataIndex=fSOpJoinDt>
<Renderer Fn=GridField_DateTime />
</ext:Column>
<ext:Column Header=角色組 DataIndex=fSRName>
</ext:Column>
<ext:Column Header=可用 DataIndex=fEnabled Width=>
<Renderer Handler=return (value>)?True:False; />
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
說明其中ext:RowNumbererColumn 是給Grid添加自動編號列<ext:Column>都有列標題 Header和數據字段名DataIndex等必要屬性
<Renderer>是列呈現的擴展方法其中常用Fn和Handler來定制呈現效果Fn一般是對應腳本函數名Handler對應腳本代碼value是當前列所獲得的單元格值
注意實際上在後台代碼綁定數據的時候只需要對Store綁定而Grid由於StoreID屬性中已經關聯了Store則無需在後台控制
總結
由後台獲得數據庫查詢數據為Store對象綁定
Store對象獲得數據以後由其定義的<Reader>讀取到本地（客戶端）內存中
Grid已經由StoreId關聯的數據倉庫則通過Columns中的各列呈現
Column對象中的Renderer可靈活擴展數據字段值的呈現效果
以上就是入門級簡單的Gridpanel+Store呈現數據
From:http://tw.wingwit.com/Article/program/net/201311/13025.html
