Coolite 开发心得

接触ExtJs不久，一直以来都是DotNet阵营，某天在网上看到Coolite就爱不释手了。但是用起来才知道不是那么顺手，可能是刚刚接触的原因。。网上的关于Coolite的资料更是少之又少了，唯一能够指望的只有Coolite官方的论坛。虽然它的官方论坛牛人很多，也通过论坛解决了不少问题，但是总觉得都是一知半解的。

     首先我觉得记得几个关键字，属性名都是其次的。关键是理解弄懂控件、对象的运行机制，步骤顺序才是重点。
1.关于Store，GridPanel
GridPanel+Store的机制，我认为是这样的。
1）Store想要定制ID等基本属性（呵呵，这是废话），其中<Reader>用来为读取数据集而定义的数据结构。
2）结构的定义需要JsonReader对象（我常用这个，JsonReader只是其中一种）
3）<Fields>中包含N个字段对象<ext:RecordField>且，必要的属性如NAME,TYPE等
4）<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="0" />
                     <ext:RecordField Name="fSSingleQuantity" Type="int" DefaultValue="0" />
                     <ext:RecordField Name="fTotalQuantity" Type="int" DefaultValue="0" />
                 </Fields>
             </ext:JsonReader>
         </Reader>
         <SortInfo Field="fSIPDId" />
     </ext:Store>
说明：
1）WarningOnDirty 用来设定是否在数据发生改变时，提示警告。涉及两个相关的属性 DirtyWarningTitle="系统警告" DirtyWarningText="数据发生改变您未保存。您确定要加载/刷新数据？"，从属性值大家就能看出是做什么用的了
2）OnRefreshData 是个很主要的事件。数据刷新事件。如果Store对象中包含AutoLoad属性并且值为TRUE的话，将会在页面加载是自动触发该事件。那么我们就可以在后台为这个事件编写诸如获得数据库中的记录集绑定数据的操作。例：
   protected void StoreInP_RefreshData(object sender, Coolite.Ext.Web.StoreRefreshDataEventArgs e)
         {
             this.StoreInP.DataSource = [dataset]\[datatable]\object[];//记录集
             this.StoreInP.DataBind();
         }
3）注意一点。设置AutoLoad为TRUE后，想要给Store加上自动加载参数，一般用于分页功能比较常见。如
   <AutoLoadParams>
             <ext:Parameter Name="start" Mode="Raw" Value="0" />
             <ext:Parameter Name="limit" Mode="raw" Value="15" />
         </AutoLoadParams>
在Store获得数据以后，GridPanel所要做的就是呈现了。Gridpanel最简单的呈现，只需要设定属性，和添加<ColumnModel>集合。必须的属性如ID，runat="server" ，StoreID。为了使我们的Grid更加美观，可以使用TrackMouseOver，Border等属性。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="35">
     <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="35">
     <Renderer Handler="return (value>0)?True:False;" />
   </ext:Column>
   </Columns>
</ColumnModel>
</ext:GridPanel>
说明：其中ext:RowNumbererColumn 是给Grid添加自动编号列，<ext:Column>都有列标题 Header，和数据字段名DataIndex等必要属性。
<Renderer>是列呈现的扩展方法，其中常用Fn和Handler来定制呈现效果。Fn一般是对应脚本函数名，Handler对应脚本代码，value是当前列所获得的单元格值。
注意，实际上在asp.net后台代码绑定数据的时候，只需要对Store绑定，而Grid由于StoreID属性中已经关联了Store则无需在后台控制。
总结：
1，由后台获得数据库查询数据，为Store对象绑定
2，Store对象获得数据以后。由其定义的<Reader>读取到本地（客户端）内存中。
3，Grid已经由StoreId关联的数据仓库，则通过Columns中的各列呈现。
4，Column对象中的Renderer可灵活扩展数据字段值的呈现效果。
以上就是入门级简单的Gridpanel+Store呈现数据。

原文：http://hi.baidu.com/feitianchong1/blog/item/a53738c6fdfe69d5d00060a2.html