EXT学习总结.doc

EXT学习总结准备工作下载EXT js使用包下载地址：/download 目前常用版本 EXT2.X 测试样例中都是使用的2.0版本下载Eclipse js编辑插件 spket下载步骤（主要配置可编辑EXT）：l 打开Eclipse，选择Help - Software Updates - Find and Install.- Search for new features to install -New remote site. 填入相关下载信息 Name: Spket, Url: /update/下载完毕重启 Eclipsel Window - Preferences - Spket - JavaScript Profiles - New 输入“ExtJS”点击OK； 选择“ExtJS” 并点击“Add Library”然后在下拉条中选取“ExtJS”； 选择 “ExtJS”并点击“Add File”，然后在你下载的./ext-2.x/source目录中选取“ext.jsb” 文件l 设置新的ExtJS Profile，选中并点击“JavaScript Profiles” 对话框右手边的“Defalut”按钮l JS打开方式为 Window - Preferences -General- Editors- File.选择JS 为 Spket JavaScript Editor(default)附：个人使用的是Eclipse和插件spket，根据个人习惯可使用别的编辑器及相关js编辑插件EXT部署及引用EXT部署项目中部署进EXT所需的最小文件集合：ext-all.js，adapter/ext/ext-base.js 包含了EXT可执行功能的所有js脚本代码build/locale/ext-lang-zh_CN.js EXT内部控件的中文显示resources目录 所有css样式表和图片（resources/css/ext-all.css 需用到的css样式表文件所在位置）EXT页面引用和通常jsp页面中引入css样式表和js脚本引入方式相同，需注意放在项目中路径即可项目常用UI控件使用EXT实现过程使用EXT GRID表格控件完成常用信息列表展示相关使用到的EXT类：Ext.grid.ColumnModel 列表每列样式控制模型类使用样例：var cm = new Ext.grid.ColumnModel( header:编号,dataIndex:id, header:名称,dataIndex:name, header:描述,dataIndex:descn);以上样例定义的是待显示列表每列样式模型。说明列表有三列，分别为“编号”、“名称”和“描述”，其中每列的header属性指定的是表头显示名，dataindex和后面的列表数据源中的数据指示属性相对应，在后面讲解；其它的样式控制属性可以查阅API文档，属性较多，自己也没有全部尝试。Ext.data.Store 列表展示所需数据源GRID支持多种格式数据作为其数据源（array、json、xml等），store只是给我们提供了一个数据源基类，其下子类不在这里介绍，可以看详细的API文档。使用样例：var ds = new Ext.data.Store( proxy: new Ext.data.MemoryProxy(data), reader: new Ext.data.ArrayReader(, name: id, mapping: 1, name: name, mapping: 0, name: descn, mapping: 2);Ds.load();以上样例包含了数据源使用的常用类，proxy是指从何处获取数据源（其基类是DataProxy，目前常用其子类为HttpProxy, MemoryProxy, ScriptTagProxy；HttpProxy为从后台服务器获取数据源，MemoryProxy为从本地js变量获取数据源，ScriptTagProxy也是从后台服务器但是此服务器可跨域部署）；reader是指怎样解析接收到的数据（其基类为DataReader，常用子类为ArrayReader、JsonReader、XmlReader、DwrReader，ArrayReader为解析js数组数据，JsonReader解析后台传入的Json数据，XmlReader解析sml数据，DwrReader是外部对EXT的一个针对DWR的数据解释器，并不在EXT范畴，主要是解析使用DWR传入的数据）；以上样例中传入的数据为js数组，并使用数组解释器解析相关数据，使用js数组如下。var data = 1,name1,descn1, 2,name2,descn2, 3,name3,descn3, ;最后的ds.load();是对数据源的数据进行一次初始化操作。Ext.grid.GridPanel Grid表格控件生成类使用ColumnModel，Store类生成所需列表使用样例：var grid = new Ext.grid.GridPanel(el: grid,ds: ds,cm: cm);grid.render();其中“el”属性为指定的Grid在页面渲染位置，通常为对应jsp中某div的id属性；ds是前面说过的列表所用数据源；cm是前面说过的列表样式控制模型类；最后的grid.render();是让Grid在页面的指定位置渲染展现。Ext.PagingToolbar 列表分页工具类使用样例：var bbar = new Ext.PagingToolbar(pageSize: 10,store: ds,displayInfo: true,displayMsg: 显示第 0 条到 1 条记录，一共 2 条,emptyMsg: 没有记录);使用方法，在产生GridPanel对象时加入 bbar：bbar 配置属性即可pageSize： 是每页显示的数据数store： 是Grid的数据源（使用分页类需注意，此时数据源的数据不再是所有数据，而是待显示页相应数据，需后台辅助处理）displayInfo： 为控制是否显示提示信息 true：显示 false：不显示displayMsg： 只有在displayInfo:true的时候才有效，用来显示有数据的时候的提示信息，到时候0,1,2会自动变成对应的数据emptyMsg：无数据时显示信息 以上是生成列表所需的最基本的几个类，其它涉及类还有较多。待控制样式也较多（如每列宽度、后台数据展示样式、按某列排序、隐藏某列显示等都可以在生成ColumnModel对象时进行相关设置或者调用自定义js函数完成等）；可编辑列表主要使用GridPanel 子类EditorGridPanel完成，这些功能在testpaging.js中已实现，可参照已上传代码。（有很多细节功能还没有测试到，可以参照API中列出的相应可使用属性替换尝试使用）使用EXT TREE相关控件完成树生成展示及树常用相关事件处理Tree.TreePanel 树生成面板工具类使用样例： var tree = new Tree.TreePanel( el:tree-div, animate:true, enableDD:true, border:false, rootVisible:true, containerScroll: true, loader:data);其中“el”和通常一样与指定的渲染位置对应，“animate”是否展开树或节点时有动画效果，“enableDD”是否树节点可拖拽，“border”是否显示带边框，“rootVisible”根节点是否可见，“containerScroll”是否显示树容器可滚动显示，“loader” 树节点数据加载类（设置属性较多，可参照API文档）Ext.tree.TreeLoader 树数据源加载类使用样例：var data = new Ext.tree.TreeLoader(url:url);其中url为从何处获取数据，通常是对应的jsp页面或者action返回待加载数据格式（JSON数据格式）通常如下：id:1,text:名称1,leaf:false,cls:folder,id:2,text:名称2,leaf:false,cls:folder以上返回数据为同一层次数据，不包含父子关系。常用属性通常有“id”标识节点id，“text”节点显示名称，“leaf”是否为叶子节点，“cls”显示引用样式。id:1,text:名称1,leaf:true,cls:file,id:2,text:名称2,leaf:false,cls:folder,children: id:4,text:名称4,leaf:true,cls:file,id:3,text:名称3,leaf:true,cls:file以上返回数据样例为具有父子关系的全部树数据；关键属性是“children”，标识此节点下子节点，这种方式关键就是在后台使用递归拼接好待返回数据。以上每个节点返回数据的可配置属性可以详细参照API文档，不再一一列举。Tree.AsyncTreeNode 异步加载树节点类控制树从后台异步加载数据，通常直接设置头节点为此节点类型使用样例：var root = new Tree.AsyncTreeNode( text: 网元树, draggable:false, id:root );其中“draggable”属性指定根节点不可拖拽以上为生成树常用类，加上tree.setRootNode(root);设置头节点，tree.render（）;在指定位置开始完成渲染显示，即可完成一棵树的生成；其下介绍树几个常用事件处理方法（近似于dom对象事件注册处理模式）。节点单击事件 Tree.on(click,function(node) alert(my id is:+node.id););在生成的TreePanel对象中注册“click”属性，并添加处理事件函数。节点右键菜单处理菜单自然要先使用到菜单类了，首先生成一个菜单对象var rightClick = new Ext.menu.Menu( id :rightClickCont, items : id:rMenu2, text : 删除节点, handler:function() deleteNode(nodeid);/删除指定节点 );其中关键属性“items”指定了此菜单有多少菜单项（可嵌套为组合菜单），每一个菜单项item中的“handler”属性为点击此菜单项所执行函数，在这个函数中可以完成此菜单项需完成操作。其次和单击事件一样向生成的TreePanel对象注册右键属性及对应执行处理函数 tree.on(contextmenu,function(node,event)/声明菜单类型 nodeid = node.id; event.preventDefault(); rightClick.showAt(event.getXY();/取得鼠标点击坐标，展示菜单 );至此右键菜单处理完毕，与后台交互代码可写在每一个动作对应的handler处理函数中。节点拖拽事件处理同以上处理方式一样，为TreePanel注册节点拖拽事件并实现处理函数 tree.on(nodedrop,function(e) /e.point=append表示拖拽节点包含关系，处理后台父子关系 alert(e.point); if(e.point=append) alert(当前+e.dropNode.id+被+e.target.id+录取！); else if(e.point=above) /放置在节点上方，感觉多用于调整节点顺序 alert(当前+e.dropNode.id+放在了+e.target.id+上面！); else if(e.point=below) /放置在节点下方，感觉多用于调整节点顺序 alert(当前+e.dropNode.id+放在了+e.target.id+下面！); );通过以上样例代码可看出我们可以通过e.point来捕获过拽的三种结果，“append”是拖拽节点被目标节点包含，成为其子节点；后两个“above”“below”为拖拽节点被放在了目标节点之上或者之下，在每一个结果判断中我们可以加入所需的事件处理函数。树节点的可注册事件还有较多，可以在API中详细查找，只要实现其对应的实现函数即可。通过事件组合完成树的详细功能也有很多，例如双树相互拖拽、与其它EXT控件组合使用完成复杂功能实现等，但是其上的根本处理思想基本相同，可辅助参照API多去尝试。使用EXT FORM相关控件完成form表单相应实现通过以上两种常用UI控件的生成我们可以看出。EXT中的js类封装了大部分代码，我们需要什么UI控件，即可先生成其控件模板对象，然后在这个对象中加入其它辅助控件类对象，来完成此所需UI控件对象的生成。下面我们介绍的form控件相应生成同样如此。先看看form控件所有的field控件类体系通过以上的说明和类层次结构图，结合html中我们常用的form域，肯定已经明白了图中Checkbox、Radio、Hidden、TextField、NumberField、TextArea、DateField、TimeField这些控件类的使用方式（每一个控件类应用还有其显示宽度、显示类型、输入值控制等设定，细节比较多，具体可参照API文档，详细比对每一个类的相关属性使用说明）。最基础的form样例代码：var form = new Ext.form.FormPanel(defaultType: textfield,labelAlign: right,title: form,labelWidth: 50,frame: true,width: 220,items: fieldLabel: 文本框,buttons: text: 按钮);form.render(form);其中多数都是控制form面板类渲染显示时使用的属性，在这里面重点说“items”属性和“buttons”属性。form中需包括的所有控件对象都需放入“items”属性中，生成控件对象有三种方式，其一是调用FormPanel对象的add方法，逐一加入控件对象（即本不再使用），其二是可以在FormPanel类对象外先生成好相应控件对象，在items属性中直接引用此外部生成的控件对象；其三是使用内隐的方式在items中使用xtype注明生成控件对象类型（Radio、TextField等）直接生成控件对象，如对控件对象没有特殊控制，尽量使用xtype内隐方式生成对象，这样生成是所用时动态初始化生成，并不是在初始化整体代码时即准备好此控件，可提升EXT本身的展示效率。以上图中有三个控件类是过去在html域中我们不常用到的，它们是TriggerField、ComboBox和HtmlEditor，下面就对这三个类一一说明。TriggerField 是触发录入控件类，单独使用此类的时机较少，多数是通过扩展此类来完成特殊输入控件需求ComboBox 是选择控件类，近似对应form中的select域，但是其功能比selet要强大的多（通过属性设置，可有联想录入功能、联动功能、显示只读等，具体可查API文档）。基础样例代码：var data = value1,text1, value2,text2, value11,text11, value12,text12;var store = new Ext.data.SimpleStore( fields: value, text, data : data);var combo = new Ext.form.ComboBox( store: store, emptyText: 请选择, mode: local, triggerAction: query, valueField: value, displayField: text， applyTo：combo);Data前面有的地方用到了，不多说了，是本地js数组数据源SimpleStore是Store类的子类，专一针对本地js数组数据源使用ComboBox是我们要显示的控件类，其中store是ComboBox使用的数据源，在此例中是使用js数组；emptyText为默认显示文本，类似select域待选择时提示文本；mode为标识数据源来源，此例为本地；triggerAction通过设置可实现选择联想功能；valueField为选择项底层传递值，与store中的fields属性中的value对应；displayField为选择项显示值，与store中的fields属性中的text对应；applyTo指定控件渲染位置，此处需注意的是这里的“combo”对应的不是div的id，而是中的id。HtmlEditor HTML编辑器，可以作为控件对象放入form面板中使用，但是EXT自带的这个编辑器较简单，通常整合外部编辑器插件使用，在后面有统一介绍。通过上面的介绍，form常用控件就差一项了，那就是常用到的文件上传控件，文件上传在EXT中没有单独封装为组件，和我们熟悉的form表单域类似，是通过设置属性来实现的。var form = new Ext.form. FormPanel( labelAlign: right, labelWidth: 60, fileUpload: true, url: form2.jsp);form.add(new Ext.form.TextField( fieldLabel: 上传, name: file, inputType: file);其中重点设置两个属性，一个是“fileUpload”属性设置为true，一个是加入form中的控件对象设置属性“inputType”设置为file即可完成配置。至此为止“items”属性大致过了一遍，可以基本生成一个form整体面板了；其后的“buttons”属性是另一大关键属性，因为form常用的提交、取消按钮等都放入这个属性中。Form数据提交buttons: text: 提交, handler: function() form.getForm().submit(); 其中需注意的是FormPanel类对象form是form布局对象，要先调用getForm()函数获取到form基类BasicForm对象，然后再调用其submit()函数进行提交Form数据取消操作buttons: text: 取消, handler: function() form.getForm().reset(); EXT 窗口类个人学习在项目中除了以上的内容，我们用到最多的就是提示信息的窗口了。在这方面EXT对多种常使用的窗口进行了很好的封装，使其展示效果及行为上都有了很大的改进。Alert基本样例代码：Ext.MessageBox.alert(标题, 内容, function(btn) alert(刚刚被点击 + btn););Alert是我们最常用的提示信息窗口，其函数有三个基本的输入参数。第一个是用来控制显示窗口的标题，第二个是窗口需显示的内容，第三个是在点击窗口的“ok”关闭按钮或者窗口右上方的小叉进行关闭窗口事件时的触发函数，也就是执行关闭窗口的回调函数Confirm基本样例代码：Ext.MessageBox.confirm(选择框, 你到底是选择yes还是no？, function(btn) alert(你刚刚点击了 + btn););Confirm是选择控制执行窗口，其函数也是有三个基本输入参数。第一个是显示窗口的标题，第二个是窗口通常的询问显示内容，第三个是根据你确定的选择结果所触发的相应处理事件，在这个处理函数中会自动获取你的选择结果Prompt基本样例代码：Ext.MessageBmpt(输入框,请您输入一些信息,function(btn,text) Alert(刚刚被点击了+btn+ ,您刚刚输入了+text););Prompt是可输入内容窗口处理窗口，其函数也有基本的三个参数。第一个同样是窗口标题信息，第二个是输入信息的提示信息，第三个是获取输入信息，处理输入信息的事件函数窗体弹出的动画效果上面是三个我们常用的窗口类，EXT中还有一个常用的弹出窗口显示效果。让对话框好像是从一个按钮跳出来的，关闭的时候还会自己缩回去。你可以看到它从小变大，又从大变小，最后不见了。可以让你的窗口动作看起来很酷，但是其不是通过生成对应的窗口类完成，而是通过页面及基本窗口类的配置信息来完成此动作实现，见下面代码：Ext.MessageBox.show( title:窗口动画效果, msg: 请选择按钮点击, buttons: Ext.MessageBox.YESNOCANCEL, fn: function(btn) alert(你刚刚点击了 + btn); , animEl: dialog);其中实现此效果重要的配置属性是“animEL”。它是一个字符串，对应着html里一个元素的id，比如等。这样设置对话窗口才知道根据哪个元素对象播放此动画效果。窗体嵌入其它EXT控件先看基本的window代码：var win = new Ext.Window( el:window-win, layout:fit, width:500, height:300, closeAction:hide, items: , buttons: text:按钮 );win.show();其中的配置属性，“el”指定这个window待渲染对应div的id（window必须需要在html中有一个对应的div元素）。“layout”是布局类型，在后面介绍。“width”和“height”是控制window显示大小。“closeAction” 是在关闭window时的执行事件，样例中默认选择hide，执行window隐藏。其上都是产生window需要的最基本的属性了，其它的可参考API文档。剩下的两个属性就比较重要了。“items”属性，把其它控件放入window中就靠这个属性了，里面可以放表格对象、form对象或者树对象等（在window对象外先生成待使用的嵌套控件对象，然后指定放入items属性中皆可）。“buttons”属性主要是控制需在window中显示按钮，按钮都放入这个buttons属性中并指定相应响应事件即可。通过以上多个类容器控件类的学习我们可以看出，在EXT 2.0中嵌套使用控件多使用items这个属性。这个属性类似一个容器，指明了在外部容器中需加入的相应控件。以上为基本的嵌套控件对象使用方法。下面是一个简单的window嵌套grid表格对象的基本代码：var win = new Ext.Window( el:window-win, layout:fit, width:500, height:300, closeAction:hide, items: grid, buttons: text:按钮 ); “items”属性中放入的grid对象是在window对象外初始化好的一个Grid对象，在这里直接放入items属性中，使表格控件直接嵌套在window中显示。EXT 页面布局类学习EXT不仅仅光为我们提供了以上简单介绍的响应控件类以供我们使用，它还为显示界面的布局以及容器的布局提供了很好的支持，下面就简单学习下布局类。布局是指在一个外部容器控件中其子元素的分布、排列及组合方式。布局的基类是Ext.layout.ContainerLayout，ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中。EXT2.0中提供了10种布局式样，常用的和我自己学习的大致有五种，分别是：border、column、fit、form、card。下面我一一简单介绍学习。Border布局Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成“上北”“下南”“左西”“右东”“中间”五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。基本样例代码：Ext.onReady(function()new Ext.Viewport(layout:border,items:region:north,height:50,title:顶部面板,region:south,height:50,title:底部面板,region:center,title:中央面板,region:west,width:100,title:左边面板,region:east,width:100,title:右边面板); );使用同样的原理，用“items”属性加入所需的五个布局对象。每一个使用“region”指定其渲染位置。Column布局Column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。基本样例代码：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器组件,layout:column,width:500,height:100,items:title:列1,width:100,title:列2,width:200,title:列3,width:100,title:列4););以上样例代码中在Panel容器类中指定“layout”属性为column，来控制其包含元素布局方式。Fit布局Fit布局是一种自适应布局，其作用是使子元素自动填满整个父容器。基本样例代码：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器组件,layout:fit,width:500,height:100,items:title:子元素,html:这是子元素中的内容););在以上样例代码中，items中的html元素将自动填充整个父容器。Form布局Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。基本样例代码：Ext.onReady(function()new Ext.Panel(renderTo:hello,title:容器组件,width:300,layout:form,hideLabels:false,labelAlign:right,height:120,defaultType: textfield,items:fieldLabel:请输入姓名,name:name,fieldLabel:请输入地址,name:address,fieldLabel:请输入电话,name:tel););同以上样例代码中一样，主要是使用“layout”属性指定布局样式为form。Card布局Card布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。基本样例代码：Ext.onReady(function()var panel=new Ext.Panel(renderTo:hello,title:容器组件,width:500,height:200,layout:card,activeItem: 0,layoutConfig: animate: true,items:title:子元素1,html:这是子元素1中的内容,title:子元素2,html:这是子元素2中的内容,title:子元素3,html:这是子元素3中的内容,buttons:text:切换,handler:changeTab);var i=1;function changeTab()panel.getLayout().setActiveItem(i+);if(i2)i=0;); 通过上面的学习可以看出，控制容器内部元素的布局方式通常是设定“layout”属性以使用对应的布局类，然后在“items”属性中加入所需的内部元素，即可简单完成布局模式。较复杂的设置属性、样式等可以自己参阅API文档。 上面只是简单介绍了五中布局，布局类的熟悉和相关属性的使用方法及时机还是要通过API文档多熟悉，网上例子也不少。可以和API文档互相结合学习使用。再次学习与后台服务器交互以上学习的内容都是在显示层使用EXT提供的相应接口来完成那令人炫目的显示处理效果，但这些再好看也是表面功夫，不足以应付前后台交互的整体系统的实现。下面就再次系统学习一下与后台服务器端交互需注意的几个方面：交互方式EXT底层使用了AJAX方式提供了一套完整的与服务器端交互的方式。可以像前面学习的那样通过在Store对象中使用Proxy和Reader对象来自动调用底层的Ext.Ajax.request类完成与服务器端的数据交互。同时也可以在需要的时机直接使用Ext.Ajax.request类与服务器端进行交互，以完成相应数据处理过程。基本样例代码：Ext.Ajax.request( url: student.jsp?cmd=save success: sFn failure: fFn, params: name: 小李,email: ,bornDate: 1992-5-6,sex: 男);上面的示例代码包含了交互基础的所需配置属性。“url”是处理请求待发送目的地，可以在这里指明请求发送的目的jsp或者action。“success”是交互成功的回调函数，可以处理请求处理成功的待处理事件。“failure” 是交互失败的回调函数，可以处理请求处理失败的待处理事件。 “params”中以JSON数据格式指明请求待传递参数和值。交互涉及关键对象的学习Ext.data.Store类Store可以理解为数据存储集，并同时提供数据缓存等功能。在ExtJS中，很多控件一般直接与Store打交道，直接通过store来获得控件中需要展现的数据等。Store中包含了数据来源，数据解析器等相关信息，Store通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy)，并转换成记录集的形式保存在Store中，作为其它控件的数据输入。目前Store下有三个实用子类，他们是SimpleStore、JsonStore、GroupingStore。SimpleStore一般数据源应对的是本地的js数组等较简单数据源，个人感觉在实际应用中作用不大。JsonStore是专门针对Json数据格式提供的专门数据集，这个在实际中较常用，通常直接接收后台服务器端传入的数据进行相关处理。GroupingStore是专门针对分组格式的数据源处理。Ext.data.DataProxyDataProxy就是数据代理，也可以理解为数据源，从哪儿或如何得到需要交给Store数据集的数据。数据代理（源）基类是Ext.data.DataProxy，以DataProxy为基础，提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三个子类分别用于从客户端内存数据、Ajax读取服务器端的数据及从跨域服务器中读取数据等三种实现。 SimpleStore等存储器是直接从从客户端的内存数组中读取数据，此时就可以直接使用Ext.data.MemoryProxy。而大多数需要从服务器端加载的数据直接使用Ext.data.HttpProxy，HttpProxy直接使用Ext.Ajax加载服务器的数据，通常这种方式为我们在实际中经常使用的加载数据方式之一。由于这种请求是不能跨域的，所以要读取部署在跨域服务器中的数据时就需要使用到Ext.data.ScriptTagProxy。另一个比较常用的是根据常用的DWR框架扩展出来的DwrProxy，它很好的和DWR框架结合。使用EXT中常用的数据设置方式很好的封装了DWR那种直接从客户端js脚本直接调用服务器端业务组件的过程。使我们方便的使用，体现了开发的便捷性（使用DwrProxy的样例可以直接上网搜索，样例较多）。Ext.data.DataReaderDataReader表示数据读取器，也就是数据解析器，负责把从服务器或者内存数组、xml文档中获得的数据进行解析，并存储到Store记录集中。数据解析器的基类是Ext.data.DataReader，其它具体的数据解析器都是该类的子类，其提供了读取二维数组、JSon数据及Xml文档的三种数据解析器，分别用于把内存中的二级数组、JSON格式的数据及XML文档信息解析成记录集。Ext.data.ArrayReader是数组解析器，用于读取二维数组中数据，转换为Store可用数据集。Ext.data.JsonReader Json数据解析器，用于读取JSON格式的数据信息，并转换成所需记录集。Ext.data.XmlReader XML文档数据解析器，用于把XML文档数据转换成所需记录集。另外就是对应DWR框架的DwrReader和DwrProxy配合使用，专门转换使用DWR框架获取的数据成数据集。以上是EXT前台和后台交互需使用到的关键类，其中的Proxy和Reader类可以根据实际的数据源类型进行组合使用，以完成前后交互操作。JSON数据格式学习前面的学习提及了很多有关Json的类及相关函数，下面就对Json数据格式进行一下学习和总结。JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。其易于阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言的习惯（包括C, C+, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为较理想的数据交换语言。Json主要由以下几种数据格式构成：名值对（对象）格式对象是一个无序的“名称/值对”集合。一个对象以“”（左括号）开始，“”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“名称/值 对”之间使用“,”（逗号）分隔。id：“1”，name：“sgx”数组格式数组是值（value）的有序集合。一个数组以“”（左中括号）开始，“”（右中括号）结束。值之间使用“,”（逗号）分隔。results：id:“1”，name：“test1”,id：“2”，name：“test2”值格式值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。number:1,name:”test”,results:id:”1”,id:”2”以上就是基本的Json数据格式，我们在使用与Json相关对象与后台服务器进行数据交互，只需要在服务器端拼接成符合Json格式的字符串返回客户端即可。FCKeditor编辑器学习前面提到了，EXT本身提供的html editor功能较少，在实际项目中起实际作用不大。就在网上想找一个好点的编辑器，就找到了目前项目中常用的FCKeditor,而且其还支持过去没有看到过的对服务器端上传文件目录的相关控制功能，感觉功能比较强大。其后台支持与php、asp、jsp等整合使用。下面就大致说一下FCKeditor的使用。第一步自然是下载相应的使用包，下载地址：/download/default.html目前我使用的是2.3版本FCKeditor2.3。由于其后台自动支持的是php和asp，所以使用java进行处理还需要下载一个官方提供的专门针对java的补充包FCKeditor2.3 (FCKeditot for java)。至此需要下载的东东已准备完毕。第二步是为fckeditor瘦身。Fckeditor本身多余的js、比较多的说明文件、默认针对php、asp的后台连接及上传文件、多余的皮肤控件等非常多，容易造成加载效率低下，所以要只针对java对fckeditor进行缩减相应工作。l 删除FCKeditor目录下除fckconfig.js（总配置文件）, fckeditor.js（主题所用功能脚本）, fckst