|
接触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呈现数据 |
