ExtJs .net

接触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是当前列所获得的单元格值。

注意，实际上在后台代码绑定数据的时候，只需要对Store绑定，而Grid由于StoreID属性中已经关联了Store则无需在后台控制。

总结：
1，由后台获得数据库查询数据，为Store对象绑定
2，Store对象获得数据以后。

由其定义的<Reader>读取到本地（客户端）内存中。

3，Grid已经由StoreId关联的数据仓库，则通过Columns中的各列呈现。

4，Column对象中的Renderer可灵活扩展数据字段值的呈现效果。

以上就是入门级简单的Gridpanel+Store呈现数据。

表格的属性分为配置属性（在操作表格时无法修改），以及其他可读写属性，方法，以及事件。

如下：配置属性
a) activeItem：渲染布局时激活的子元素。

b) applyTo：指定渲染对象。

c) autoDestroy：当容器的子元素从容器中移除时是否自动销毁。

d) autoExpandColumn：指定自动填充表格剩余区域的列id
e) autoExpandMax：可自动扩张的最大宽度。

f) autoExpandMin：可自动扩张的最小宽度
g) autoHeight:自动扩充高度
h) autoShow：是否自动显示
i) autoWidth：自动扩充宽度
j) bbar/tbar：底部/顶部状态栏
k) bufferResize：容器再布局的缓冲频率
l) colModel/cm:列模式
m) cls：组件的额外css格式。

n) collapsible:是否显示快捷隐藏按钮
o) defaults：指定默认配置。

p) disableSelection：是否禁止选择表格行或列
q) enableDragDrop：是否允许表格列的拖放操作。

r) enableHdMenu：是否显示表格列的菜单。

s) frame：边框是否显示
t) loadMask: 是否显示加载动画
u) selModel/sm：表格选择模式
v) store:表格数据集
w) stripeRows：是否显示分隔线。

x) title：表格标题方法
a) getColumnModel()：得到表格列模型
b) getGridEl():得到表格下的元素
c) getPosition():得到组件的当前位置，返回一个数组
d) getSelectionModel():得到选中模型
e) getSize():得到组件大小
f) getStore():得到组件的数据集
g) getView():得到表格的GridView对象。

h) hide():隐藏当前组件
i) isVisible():判断当前组件是否显示
j) setDisabled( Boolean):设置组件的可用性
k) un():解除组件的监听
l) on()：为组件添加监听
on ( String eventName, Function handler, [Object scope] )
eventName:添加监听的名称
handler:事件处理函数
scope:事件响应的作用域,包括scope,delay,single,buffer。