ext学习课件.ppt

EXT由JAVASCRIPT开发而来的一种UI组件 主要是运用WEB2 0思想 运用CSS达到对DIV的控制 使用户有良好的体验 在EXT中 有大量的AJAX运用 而且在EXT中 所有的方法和类都是跨浏览器的 兼容性很好 由于EXT是由JAVASCRIPT开发的 所以可以运行在所有现有的WEB技术上 比如HTML JSP ASP PHP EXT2 0学习和使用总结 EXT是由JAVASCRIPT脚本编写成的一个强大的B S架构下的良好的用户体验的客户端程序 对于饱受网页样式疾苦的广大程序员同志们来讲 EXT让我们看到了黎明的曙光 我们看到了JAVA也可以做的如此的 炫在这里先给大家发几个截图看看 体会一下 后台管理布局 如此炫目的列表 仿佛让我们回到了VB开发的C S系统的时光 如果让您把一个网页做到如此效果 您要花多久呢 别具一格的窗体 多像是C S架构的窗体啊 可惜 不是 它是一个由脚本构成的网页 集合了现今流行的JSON和AJAX技术 自定义的验证 静态提交数据 静态翻页 基本都是静态的操作 HTML的select标签 EXT的下拉列表定位功能 Select 很抱歉 我不能输入 也没有定位的功能Combo 我可以读取多种格式的数据 也可以绑定到SELECT标签 获得数据 更重要的是 我可以远程获得数据并且在无刷新的情况下 填充 多么好的时间控件啊 在这里 可以随心所欲的定义时间的输出格式 而且 时间控件还能判断你输入的时间格式是否合法 还有很多功能 小插曲 看了那么多 您一定对EXT的炫目界面所倾倒吧 您是不是在为B S的UI界面犯愁呢 您是不是想赶快入门呢 如果您准备好了 LET SGO EXT发布包下载 首先下载EXT发布包下载在使用EXT的时候 需要导入下面所列出的JS类库和CSS样式库 resources css ext all css adapter ext ext base js ext all jsext base js主要是程序架构 和底层支持ext all js主要是所有控件 验证 容器等相关程序的实现ext all css包含了所有的EXT使用到的样式build locale ext lang zh CN js是中文翻译 resources目录下是css样式表和图片 把EXT部署到TOMCAT上 将ext 2 0 2放到tomcat的webapps目录下 然后启动 部署成功 端口设置成8080 方便后面案例演示 最好把这个目录放在TOMCAT下面 里面有拓展控件 下载的没有 原因 EXT中文件引用基本上都是相对的 放在TOMCAT中可以很好的解析 使用前提 导入程序库 scripts ext resources css ext all css EXT通用CSS 包含所有的样式 必须 scripts ext resources css icon css 自定义存放菜单项或其他页面图标 自定义 scripts ext ext base js 框架基础库 必须 scripts ext ext all js 包含了所有的EXT类库 必须 scripts ext ext lang zh CN js EXT所有的中文提示 必须 scripts utils validate js 基础验证类 基础验证方法的实现 自定义 scripts ext ext validate js 使用ext格式的自定义验证 自定义 请导入EXT必须库 并且按顺序导入1 ext all css2 ext base js3 ext all js4 ext lang zh CN js 为什么按顺序导入 首先导入ext all CSS样式表 是因为在JS文件里面都用到了ext all CSS里面的样式 放后面的话 程序加载后 就找不到相应的样式 然后是基础库ext base js 看名字就知道 是基础 当然是最根本的 供其他程序调用的 在EXT里面所有的控件 列表 验证 等拓展类都存放在ext all js里面 按照自顶向下的运行原则 加载的顺序就一目了然了 开发工具spket 在使用Ext之前 我先给大家介绍几个开发js常用的工具 Spket是一款全面支持JavaScript XUL XBL Flex SVG的免费开发工具 最重要的点是它就像是为Ext量身定作的一样 既可以作为Eclipse的插件 又可以作为独力的IDE 下面说一下spket的安装和使用 最后还会介绍另外一种以link方式安装spket的使用方式 先介绍一下如何将Spket作为Eclipse的插件来使用 首先下载Spket的exlipse插件包 从网址 选中javascriptprofiles选项 会出现JavaScript配置列表 默认情况下它没有提供对EXT的支持 所以下面我们需要将EXT库添加到列表中单击右侧的添加按钮 在弹出的窗口中输入 EXT 点确定便可以看到EXT的名字已经出现在列表中 再单击右侧的AddLibrary 在弹出的窗口中选择ExtJs 然后单击OK按钮 便会看到EXT库列表下成功添加了ExtJs类库 如图 选中库列表 单击右侧的AddFile按钮 便可以上传文件 选择下我们下载的EXT包中的ext jsb文件并打开 可以看到ExtJs类库中多了很多Ext文件 默认选择了ExtBase和Everthing ExtBase是EXT的核心 Everthing中包含了EXT的source目录下的所有JavaScript文件 到这里 Spket插件的安装和配置就已经完成了 说明 现在最新版本的Ext3 0 0中没有jsb文件呢 我在ext的论坛上面下载了一个 叫jsb2 现在要下载最新版的spket才支持 此外还可以下载spket的ide安装包 这样就可以直接使用spket来开发 这个的安装和使用也比较简单 像平常的软件安装方式一样 这里就不再详细说明了 另外还有两个比较有用的调式工具ie的MicrosoftScriptDebugger IEDevToolBarSetup和Firefox和Firebug 组件的介绍 Ext组件是由Component类定义 每一种组件都有一个指定的xtype属性值 通过该值可以得到一个组件的类型或者是定义一个指定类型的组件 组件分类 基本组件 一些基本的 常用的 功能型组件工具栏组件 主要是工具栏依靠的组件表单及元素组件 用于用户输入的组件 基本组件 boxExt BoxComponent具有边框属性的组件buttonExt Button按钮colorpaletteExt ColorPalette调色板componentExt Component组件containerExt Container容器cycleExt CycleButtondataviewExt DataView数据显示视图datepickerExt DatePicker日期选择面板editorExt Editor编辑器editorgridExt grid EditorGridPanel可编辑的表格gridExt grid GridPanel表格pagingExt PagingToolbar工具栏中的间隔panelExt Panel面板progressExt ProgressBar进度条splitbuttonExt SplitButton可分裂的按钮tabpanelExt TabPanel选项面板treepanelExt tree TreePanel树viewportExt ViewPort视图windowExt Window窗口 toolbarExt Toolbar工具栏tbbuttonExt Toolbar Button按钮tbfillExt Toolbar Fill文件tbitemExt Toolbar Item工具条项目tbseparatorExt Toolbar Separator工具栏分隔符tbspacerExt Toolbar Spacer工具栏空白tbsplitExt Toolbar SplitButton工具栏分隔按钮tbtextExt Toolbar TextItem工具栏文本项 工具栏组件 表单及元素组件 formExt FormPanelForm面板checkboxExt form Checkboxcheckbox录入框comboExt form ComboBoxcombo选择项datefieldExt form DateField日期选择项fieldExt form Field表单字段fieldsetExt form FieldSet表单字段组hiddenExt form Hidden表单隐藏域htmleditorExt form HtmlEditorhtml编辑器numberfieldExt form NumberField数字编辑器radioExt form Radio单选按钮textareaExt form TextArea区域文本框textfieldExt form TextField表单文本框timefieldExt form TimeField时间录入项triggerExt form TriggerField触发录入项 程序入口 Ext onReady可能是你接触的第一个方法 这个方法是指当前DOM加载完毕后 保证页面内的所有元素能被Script引用 reference 你可删除alert 那行 加入一些实际用途的代码试试 Ext onReady function alert 小周周 你好 弹出框Ext MessageBox 一 Ext MessageBox alert 消息框Ext MessageBox alert 提示 欢迎使用EXT 感谢您对EXT的支持 图例 Ext MessageBox confirm 选择框Ext MessageBox confirm 登陆 确定吗 function btn if btn yes alert 确定 图例 Ext MessageBox prompt 输入框Ext MessageBox prompt 姓名 输入姓名 function btn text if btn yes alert text 图例 弹出框Ext MessageBox 二 Ext MessageBox show 显示框Ext MessageBox show title 保存吗 msg 你确定保存吗 buttons Ext MessageBox YESNOCANCEL 图例 进度条Ext MessageBox show title 请稍等 msg 正在加载中 progressText 加载 idth 300 progress true 图例 其他案例 树形菜单 Ext的树形菜单有很多样式官方提供了大约有四种类型的树形菜单1 DragandDropReordering 拖放树2 Multipletrees 多重树3 ColumnTree 表头树当然现在还有很多拓展的树形结构 比如在下拉框里面拓展一棵树形结构 各位有兴趣可以自己到网站上下载 DragandDropReordering 拖放树 Ext onReady function varTree Ext tree vartree newTree TreePanel el tree div seArrows true autoScroll true animate true enableDD true containerScroll true loader newTree TreeLoader dataUrl get nodes jsp varroot newTree AsyncTreeNode text ExtJS draggable false id source tree setRootNode root tree render root expand Multipletrees 多重树 varTreeTest function varTree Ext tree return init function vartree newTree TreePanel el tree animate true autoScroll true loader newTree TreeLoader dataUrl get nodes php enableDD true containerScroll true dropConfig appendOnly true newTree TreeSorter tree folderSort true varroot newTree AsyncTreeNode text ExtJS draggable false id source tree setRootNode root tree render root expand false noanim false vartree2 newTree TreePanel el tree2 animate true autoScroll true loader newExt tree TreeLoader dataUrl get nodes php baseParams lib yui containerScroll true enableDD true dropConfig appendOnly true newTree TreeSorter tree2 folderSort true varroot2 newTree AsyncTreeNode text MyFiles draggable false id yui tree2 setRootNode root2 tree2 render root2 expand false noanim false Ext EventManager onDocumentReady TreeTest init TreeTest true ColumnTree 表头树 Ext onReady function vartree newExt tree ColumnTree el tree ct width 552 autoHeight true rootVisible false autoScroll true title ExampleTasks columns header Task width 350 dataIndex task header Duration width 100 dataIndex duration header AssignedTo width 100 dataIndex user loader newExt tree TreeLoader dataUrl column data json uiProviders col Ext tree ColumnNodeUI root newExt tree AsyncTreeNode text Tasks tree render 布局 Accordion布局Border布局Card布局Column布局Fit布局Form布局Table布局Anchor布局 Accordion布局 Accordion布局由类Ext layout Accordion定义 名称为accordion 表示可折叠的布局 也就是说使用该布局的容器组件中的子元素是可折叠的形式 后台菜单里每个面板里都是用html的table的布局展现的 这可根据不同的需要 也放放置其它html或ext元素 表单等查看案例 在布局中配置不同的参数 会展示出不同的效果 如 animate为true 表示在执行展开折叠时是否应用动画效果 activeOnTop为true 表示在点击每一个子元素的头部名称或右边的按钮 则会展开该面板 收缩其它已经展开的面板 并将点击的那个面板置于顶部显示 具体的各个控件的动作和效果大家可以参考 Border布局 Border布局由类Ext layout BorderLayout定义 布局名称为border 该布局把容器分成东南西北中五个区域 分别由east south west north cente来表示 在往容器中添加子元素的时候 我们只需要指定这些子元素所在的位置 Border布局会自动把子元素放到布局指定的位置 对应的每一块区域 可以通过contentEl west 指定不同的div层显示不同的内容 layout之前可以嵌套使用 如 后台首页 查看案例 Card布局 Card布局由Ext layout CardLayout类定义 名称为card 该布局将会在容器组件中某一时刻使得只显示一个子元素 可以满足安装向导 Tab选项板等应用中面板显示的需求 该例创建了一个容器组件面板 面板中包含三个子面板元素 父容器包含一个 切换 按钮 点击该按钮将会执行changeTab函数 该函数实现把父容器中的活动面板在三个子元素之间进行切换查看案例 Column布局 Column布局由Ext layout ColumnLayout类定义 名称为column 列布局把整个容器组件看成一列 然后往里面放入子元素的时候 可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度 columnWidth表示使用百分比的形式指定列宽度 而width则是使用绝对象素的方式指定列宽度 在实际应用中可以混合使用两种方式 查看案例 Fit布局 指定父容器使用Fit布局 因此子元素将自动填满整个父容器 如果容器组件中有多个子元素 则只会显示一个元素 查看案例 Form布局 Form布局由类Ext layout FormLayout定义 名称为form 是一种专门用于管理表单中输入字段的布局 这种布局主要用于在程序中创建表单字段或表单元素等使用 面板使用Form布局 面板中包含三个子元素 这些子元素都是文本框字段 在父容器中还通过hideLabels labelAlign等配置属性来定义了是否隐藏标签 标签对齐方式等 在实际应用中 Ext form FormPanel这个类默认布局使用的是Form布局 而且FormPanel还会创建与标签相关的组件 因此一般情况下我们直接使用FormPanel即可 Table布局 table布局由类Ext layout TableLayout定义 名称为table 该布局负责把容器中的子元素按照类似普通html标签创建了一个父容器组件 指定使用Table布局 layoutConfig使用columns指定父容器分成3列 子元素中使用rowspan或colspan来指定子元素所横跨的单元格数 查看案例 Anchor布局 由Ext layout AnchorLayout定义 名称为Anchor 主要是里面的控件可以随着容器的变化而变化 不论是变大还是变小 控件与容器之间的位置保持相对查看案例 2020 1 24 39 DataProxy与自定义Store DataProxy字面解释就是数据代理 也可以理解为数据源 也即从哪儿或如何得到需要交给DataReader解析的数据 数据代理 源 基类由Ext data DataProxy定义 在DataProxy的基础 ExtJS提供了Ext data MemoryProxy Ext data HttpProxy Ext data ScriptTagProxy等三个分别用于从客户端内存数据 Ajax读取服务器端的数据及从跨域服务器中读取数据等三种实现 比如像SimpleStore等存储器是直接从从客户端的内存数组中读取数据 此时就可以直接使用Ext data MemoryProxy 而大多数需要从服务器端加载的数据直接使用Ext data HttpProxy HttpProxy直接使用Ext Ajax加载服务器的数据 由于这种请求是不能跨域的 所以要要读取跨域服务器中的数据时就需要使用到Ext data ScriptTagProxy 在实际应用中 除了基本的从内存中读取javascript数组对象 从服务器读取JSON数组 从服务器取xml文档等形式的数据外 有时候还需要使用其它的数据读取方式 当以上这几种方式不能满足需求的时候 我们就需要创建自定义的DataProxy及Store 然后使用这个自定义的Store来处理得到数据 不过到目前还没有碰到这种另类的情况 Ext data HttpProxy api文档中服务端返回信息时必须指定Content Type属性为 text xml 但之前使用基本上都是用 application x www form urlencoded HttpProxy Objectconn 构造一个HttpProxy对象 参数可以是一个类似于 url test jsp 这样的json对象 也可以是一个Ext data Connection对象 getConnection Connection得到当前连接对象 load Objectparams Ext data DataReaderreader Functioncallback Objectscope Objectarg void从配置的connection对象得到record数据块 并激发callbackparams 发起http请求时所要传递到服务端的参数DataReader 见DataReadercallback 回调函数 第一个参数为接收到的信息 第二个参数为arg 第三个是成功标志scope 范围arg 这儿的参数将会传递给回叫函数callback 示例 varproxy newExt data HttpProxy url datasource xml 关于reader将会在Ext data DataReader中讲解varreader newExt data XmlReader totalRecords results record row id id name name mapping name name occupation 定义回叫方法varmetadata functioncallback data arg success if success metadata data 从connection配置的url中利用reader将返回的xml文件转为元数据 并传递给callbackproxy load null reader callback this Ext data MemoryProxy Ext data MemoryProxyMemoryProxy Objectdata load Objectparams Ext data DataReaderreader Functioncallback Objectscope Objectarg void取数据 和HttpProxy类似 只是params参数没有被使用 示例 varproxy newExt data MemoryProxy 1 Bill Gardener 2 Ben Horticulturalist varreader newExt data ArrayReader id 0 name name mapping 1 name occupation mapping 2 varmetadata functioncallback data arg success metadata data proxy load null reader callback this Ext data ScriptTagProxy 这个类和HttpProxy类似 也是用于请求远程数据 但能用于跨主域调用 如果请求时使用了callback参数则服务端应指定Content Type属性为 text javascript 并返回callback jsonobject 反之则应置Content Type属性为 application x json 并直接返回json对象 ScriptTagProxy Objectconfig 构造 其中config定义为 callbackParam String 回调参数nocache Boolean 是否缓存timeout Number 超时url String 请求数据的url load Objectparams Ext data DataReaderreader Functioncallback Objectscope Objectarg void参见HttpProxy DataReader DataReader表示数据读取器 也就是数据解析器 其负责把从服务器或者内存数组 xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象 并存储到Store里面的记录集数组中 数据解析器的基类由Ext data DataReader定义 其它具体的数据解析器都是该类的子类 ExtJS中提供了读取二维数组 JSon数据及Xml文档的三种数据解析器 分别用于把内存中的二级数组 JSON格式的数据及XML文档信息解析成记录集 下面简单的介绍 1 ArrayReaderExt data ArrayReader 数组解析器 用于读取二维数组中的信息 并转换成记录集Record对象 首先看下面的代码 varMyRecord Ext data Record create name title mapping 1 name username mapping 2 name loginTimes type 3 int varmyReader newExt data ArrayReader id 0 MyRecord 这里定义的myReader可以读取下面的二维数组 1 测试 小王 3 2 新年好 williamraym 13 2 JsonReaderExt data JsonReader Json数据解析器 用于读取JSON格式的数据信息 并转换成记录集Record对象 在J2EE中可以使用这个解析器来实现JSON数据的生成JSON LIB具体实现方法 看下面使用JsonReader的代码 varMyRecord Ext data Record create name title name username mapping author name loginTimes type int varmyReader newExt data JsonReader totalProperty results root rows id id MyRecord 这里的JsonReader可以解析下面的JSON数据 results 2 rows id 1 title 测试 author 小王 loginTimes 3 id 2 title Ben author williamraym loginTimes 13 JSonReader还有比较特殊的用法 就是可以把Store中记录集的配置信息存放直接保存在从服务器端返回的JSON数据中 比如下面的例子 varmyReader newExt data JsonReader 这一个不带任何参数的myReader 可以处理从服务器端返回的下面JSON数据 metaData totalProperty results root rows id id fields name title name username mapping author name loginTimes type int results 2 rows id 1 title 测试 author 小王 loginTimes 3 id 2 title 新年好 author williamraym loginTimes 13 3 XmlReaderExt data XmlReader XML文档数据解析器 用于把XML文档数据转换成记录集Record对象 看下面的代码 varMyRecord Ext data Record create name title name username mapping author name loginTimes type int varmyReader newExt data XmlReader totalRecords results record rows id id MyRecord 上面的myReader能够解析下面的xml文档信息 21测试小王32新年好williamraym13 面板Panel 面板Panel是ExtJS控件的基础 很高级控件都是在面板的基础上扩展的 还有其它大多数控件也都直接或间接有关系 应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成 面板由以下几个部分组成 一个顶部工具栏 一个底部工具栏 面板头部 面板尾部 面板主区域几个部分组件 面板类中还内置了面板展开 关闭等功能 并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为 面板可以放入其它任何容器中 面板本身是一个容器 他里面又可以包含各种其它组件 面板的类名为Ext Panel 其xtype为panel 下面的例子可以显示出面板的各个组成部分 一般情况下 顶部工具栏或底部工具栏只需要一个 而面板中一般也很少直接包含按钮 一般会把面板上的按钮直接放到工具栏上面 面板中可以有工具栏 工具栏可以位于面板顶部或底部 Ext中工具栏是由Ext Toolbar类表示 工具栏上可以存放按钮 文本 分隔符等内容 面板对象中内置了很多实用的工具栏 可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项 查看案例 tools自带的id有 toggle close minimize maximize restoregear pin unpin right leftup down refresh minus plus help search save print除了在面板头部加入这些已经定义好的工具栏选择按钮以外 还可以在顶部或底工具栏中加入各种工具栏选项 这些工具栏选项主要包括按钮 文本 空白 填充条 分隔符等 TabPanel 为了显示一个面板 我们需要在页面上添加一个div 然后把Ext控件渲染到这个div上 VeiwPort代表整个浏览器显示区域 该对象渲染到页面的body区域 并会随着浏览器显示区域的大小自动改变 一个页面中只能有一个ViewPort实例 Viewport不需要再指定renderTo 而我们也看到Viewport确实填充了整个浏览器显示区域 并会随着浏览器显示区域大小的改变而改改 Viewport主要用于应用程序的主界面 可以通过使用不同的布局来搭建出不同风格的应用程序主界面 在Viewport上常用的布局有fit border等 当然在需要的时候其它布局也会常用 Record 在前面的表格应用中 我们已经知道表格的数据是存放类型为Store的数据存储器中 通过指定表格Grid的store属性来设置表格中显示的数据 通过调用store的load或reload方法可以重新加载表格中的数据 ExtJS中用来定义控件中使用数据的API位于Ext data命名空间中 我们重点对ExtJS中的数据存储Store进行介绍 Record首先需要明确是 ExtJS中有一个名为Record的类 表格等控件中使用的数据是存放在Record对象中 一个Record可以理解为关系数据表中的一行 也可以称为记录 Record对象中即包含了记录 行中各列 的定义信息 也就是该记录包含哪些字段 每一个字段的数据类型等 同时又包含了记录具体的数据信息 也就是各个字段的值 首先使用Record的create方法创建一个记录集MyRecord MyRecord其实是一个类 该类包含了记录集的定义信息 可以通过MyRecord来创建包含字段值的Record对象 在上面的代码中 最后的几条语句用来输出记录集的相关信息 MyRecord getField username 可以得到记录中username列的字段信息 r get loginTimes 可以得到记录loginTimes字段的值 而r data username同样能得到记录集中username字段的值 对Record有了一定的了解 那么要操作记录集中的数据就非常简单了 比如r set name value 可以设置记录中某指定字段的值 r dirty Boolean 可以得到当前记录是否有字段的值被更改过等等 Store Store可以理解为数据存储器 可以理解为客户端的小型数据表 提供缓存等功能 在ExtJS中 GridPanel ComboBox DataView等控件一般直接与Store打交道 直接通过store来获得控件中需要展现的数据等 一个Store包含多个Record 同时Store又包含了数据来源 数据解析器等相关信息 Store通过调用具体的数据解析器 DataReader 来解析指定类型或格式的数据 DataProxy 并转换成记录集的形式保存在Store中 作为其它控件的数据输入 数据存储器由Ext data Store类定义 一个完整的数据存储器要知道数据源 DataProxy 及数据解析方式 DataReader 才能工作 在Ext data Store类中数据源由proxy配置属性定义 数据解析 读取 器由reader配置属性定义 一个较为按部就班创建Store的代码如下 varMyRecord Ext data Record create name title name username mapping author name loginTimes type int name lastLoginTime mapping loginTime type date vardataProxy newExt data HttpProxy url link ejf vartheReader newExt data JsonReader totalProperty results root rows id id MyRecord varstore newExt data Store proxy dataProxy reader theReader store load 当然 这样的难免代码较多 Store中本身提供了一些快捷创建Store的方式 比如上面的示例代码中可以不用先创建一个HttpProxy 只需要在创建Store的时候指定一个url配置参数 就会自动使用HttpProxy来加载参数 比如 上面的代码可以简化成 varMyRecord Ext data Record create name title name username mapping author name loginTimes type int name lastLoginTime mapping loginTime type date vartheReader newExt data JsonReader totalProperty results root rows id id MyRecord varstore newExt data Store url link jsp proxy dataProxy reader theReader store load 虽然不再需要手动创建HttpProxy了 但是仍然需要创建DataReader等 毕竟还是复杂 ExtJS进一步把这种常用的数据存储器进行了封装 在Store类的基础上提供了SimpleStore SimpleStore GroupingStore等 直接使用SimpleStore 则上面的代码可以进一步简化成下面的内容 varstore newExt data JSonStore url link ejf cmd list totalProperty results root rows fields title name username mapping author name loginTimes type int name lastLoginTime mapping loginTime type date store load TreePanel 在应用程序中 我们经常会涉及到要显示或处理树状结构的对象信息 比如部门信息 地区信息 或者是树状的菜单信息 操作系统中的文件夹信息等 对于传统的html页面来说 要自己实现显示树比较困难 需要写很多的javascript 特别是对于基于Ajax异步加载的树来说 不但涉及到Ajax数据加载及处理技术 还需要考虑跨浏览器支持等 处理起来非常麻烦 ExtJS中提供了现存的树控件 通过这些控件可以在B S应用中快速开发出包含树结构信息的应用 TreePanel基本使用 树控件由Ext tree TreePanel类定义 控件的名称为treepanel TreePanel类继承自Panel面板 在ExtJS中使用树控件其实非常简单 http localhost 8080 zszq extDemo tree tree1 jspExt onReady function varroot newExt tree TreeNode id root text 树的根 root appendChild newExt tree TreeNode id c1 text 子节点 vartree newExt tree TreePanel renderTo hello root root width 100 代码的第一句使用newExt tree TreeNode类来创建一个树节点 第二句使用树节点的root的appendChild方法来往该节点中加入一个子节点 最后直接使用newExt tree TreePanel来创建一个树面板 要树面板的初始化参数中指定树的root属性值为前面创建的root节点 也就是树根节点 树的节点信息 ExtJS的树控件提供了对这种功能的支持 你只需要在创建树控件的时候 通过给树指定一个节点加载器 可以用来从服务器端动态加载树的节点信息 查看案例 当然上面的程序是一次性加载完了树的所有节点信息 我们也可以实现让每一个节点都支持动态加载的树 只需要在通过服务器请求数据的时候 每次服务器端返回的数据只只包含子节点 而不用把孙子节点也返回即可 也就是节点树中只包含一个子节点 而该子节点通过指定leaf值为false 默认情况该值为false 表示该节点不是一个叶子节点 其下面还有指节点 再执行前面的程序 不断点击 子节点 事件处理 当然 仅仅能显示一棵树还不够 我们一般还需要在用户点击树节点的时候执行相应的东西 比如打开某一个连接 执行某一个函数等 这就需要使用到事件处理 执行上面的程序 当用户点击树控件中的任意节点时 都会弹出一个提示信息框 当用户点击c1这个子节点时 会弹出两次提示信息框 因为我们除了指定tree的click事件响应函数以外 另外又给node节点指定单独的事件响应函数 当然 如果只是要实现当点击树节点时跳到某一个指定url的功能则非常简单 执行程序 点击树节点 将会在浏览新窗口中打开节点中href指定的链接 具体实现可参考docs jsonClick和loadClass就是方法入口 对于ExtJS中的树来说 树加载器TreeLoader是一个比较关键的部件 树加载器由Ext tree TreeLoader类定义 只有AsyncTreeNode才会使用TreeLoader Ext onReady function varloader newExt tree TreeLoader url treedata js varroot newExt tree AsyncTreeNode id root text 根节点 loader loader vartree newExt tree TreePanel renderTo hello root root width 100 首先我们使用Ext tree TreeLoader来初始化了一个TreeLoader对象 构造函数中的配置参数url表示获得树节点信息的url 然后在初始化根节点的时候我们使用的是AsyncTreeNode 在该节点中指定该节点的laoder为前面定义的loader 执行这段程序 在点击 根节点 时 会从服务器端指定root节点的子节点信息 TreeLoader严格来说是针对树的节点来定义的 可以给树中的每一个节点定义不同的TreeLoader 默认情况下 如果一个AsyncTreeNode节点在准备加载子节点的时候 如果该节点上没有定义loader 则会使用TreePanel中定义的loader作为加载器 因此 我们可以直接在TreePanel上面指定loader属性 这样就不需要给每一个节点指定具体的TreeLoader了 在ExtJS中 不管是叶子节点还是非叶子节点 都统一用TreeNode表表示树的节点 在ExtJS中 有两种类型的树节点 一种节点是普通的简单树节点 由Ext tree TreeNode定义 另外一种是需要异步加载子节点信息的树节点 该类由Ext tree AsyncTreeNode定义 处理机制 ExtJS提供了一套强大的事件处理机制 通过这些事件处理机制来响应用户的动作 监控控件状态变化 更新控件视图信息 与服务器进行交互等等 事件统一由Ext EventManager对象管理 与浏览器W3C标准事件对象Event相对应 Ext封装了一个Ext EventObject事件对象 支持事件处理的类 或接口 为Ext util Observable 凡是继承该类的组件或类都支持往对象中添加事件处理及响应功能 首先我们来看标准html中的事件处理 看下面的html代码 functiona alert something 点击这个按钮则会触发onclick事件 并执行onclick事件处理函数中指定的代码 这里直接执行函数a中的代码 也即弹出一个简单的信息提示框 再简单修改一下上面的代码 内容如下 functiona alert something window onload function document getElementById btnAlert onclick a 上面的代码在文档加载的时候 就直接对btnAlert的onclick赋值 非常清晰的指明了按钮btnAlert的onclick事件响应函数为a 注意这里a后面不能使用括号 xtJS中组件的事件处理跟上面相似 看下面的代码 functiona alert something Ext onReady function Ext get btnAlert addListener click a Ext get btnAlert 得到一个与页面中按钮btnAlert关联的Ext Element对象 可以直接调用该对象上的addListener方法来给对象添加事件 同样实现前面的效果 在调用addListener方法的代码中 第一个参数表示事件名称 第二个参数表示事件处理器或整个响应函数 ExtJS支持事件队列 可以往对象的某一个事件中添加多个事件响应函数 看下面的代码 Ext onR