基于ExtJs框架三态树组件.docVIP

基于ExtJs框架三态树组件 　　【摘 要】在油井措施评价与预测研究中，引入了ExtJs框架作为客户端界面设计工具。根据项目需要，详细研究了ExtJs树形组件的源码，对树结点的两种状态（选中与未选中）进行了分析与改进，扩展实现了三态树组件-——树结点的三种状态（全选，半选，未选），提高了用户体验。 　　【关键词】ExtJs；树形组件；三态树 　　1.引言 　　EXTJS是一个优秀的富客户端JS框架，提供了许多丰富华丽的客户端组件，如表格，表单，选项卡面板，树形控件等，方便了WEB应用程序的开发，提高了WEB程序的客户体验，尤为重要的是，该框架不仅提供了源代码，而且提供了扩展接口，方便用户对现有的控件进行定制扩展。在辽河油田曙光采油厂的油井措施评价与预测系统中，使用到了EXTJS中的树形控件，EXTJS自身提供的树形控件功能比较丰富，但每个节点只有两种状态选中和非选中，但在实际情况中，当树形父节点的多个子结点的部分为选中，部分为非选中状态时，此时父节点的实际状态为半选中状态，EXTJS原有的树形控件并没有处理这一种情况，本文根据项目实际需要，对EXTJS中的树形控件进行扩展，实现了树结点的三种状态——即全选，半选，未选。 　　2.EXTJS树形控件实现原理 　　EXTJS中，树对象是TreePanel类型，代表树结构面板，它有2个重要的属性： 　　root属性：设置树对象的根结点对象，为TreeNode或者AsyncTreeNode类型； 　　loader属性：设置树加载器对象，读取远程结点数据（树形结构的JSON数据），为TreeLoader类型； 　　其中，TreeLoader类型也有2个重要的属性： 　　dataUrl属性：设置获JSON数据的后台页面地址； 　　uiProvider属性：设置树结点的表现形式，即样式类型，默认为TreeNodeUI，TreeNodeUI类即EXTJS自身提供类型，提供了2种状态的树结点呈现方式。 　　由此可以看出，在EXTJS中，树节点样式与树结点本身是两个相互独立的部分，可以通过设置树节点的表现形式来改变树结构的实现效果，从而达到扩展实现一个新的树形组件的目的。具体须扩展二个类：TreeLoader，TreeNodeUI，其中重点是扩展TreeNodeUI类。 　　3.三态树扩展实现过程 　　3.1 TreeLoader类扩展 　　对该类的???展比较简单，重写其uiProvider属性，设置为新扩展的TreeNodeUI类型即可。 　　Ext.ux.TreeThreeStateLoader=function（）{ 　　this.baseAttrs={uiProvider：Ext.ux.TreeThreeStateNodeUI}； 　　Ext.ux.TreeThreeStateLoader.superclass.constructor.apply（this，arguments）； 　　}； 　　Ext.extend（Ext.ux.TreeThreeStateLoader，Ext.tree.TreeLoader）； 　　其中，Ext.ux.TreeThreeStateLoader为新扩展的TreeLoader类型名，Ext.extend是EXTJS提代的扩展接口。 　　3.2 TreeNodeUI类扩展 　　扩展思路如下： 　　（1）checked属性由’true’与’false’两种状态扩展为：’all’、’part’、’none’“三态”，分别为全选，半选，非选中状态。该属性不需要重写，只须在改变该属性值的相关方法中设置其值为新的状态值即可，但须注意扩展后的类的JSON源数据也须由原来的二态格式： 　　{{id：’090100’，checked：’true’}，{id：’090101’， 　　checked：’true’}，{id：’090102’，checked：’false’}} 　　转换为新的三态格式： 　　{{id：’090100’，checked：’part’}，{id：’090101’， 　　checked：’all’}，{id：’090102’，checked：’none’}}。 　　（2）新增onlyLeafCheckable属性用于控制是否只有叶子节点可选，新增checkModel属性控制单选还是多选； 　　（3）重写renderElement方法，该方法须重写新的树结点呈现方式，以及为树结点注册单击事件，以获取或设置结点新状态； 　　renderElement方法重写过程如下： 　　（1）设置树结点的三态图标存放路径以及新的CSS样式。注意：需要准备三种状态的图标文件：all.gif，part.gi