• 1. 欢迎学习EXT,首先介绍下什么是EXT。 EXT由JAVASCRIPT开发而来的一种UI组件,主要是运用WEB2.0思想,运用CSS达到对DIV的控制,使用户有良好的体验。在EXT中,有大量的AJAX运用,而且在EXT中,所有的方法和类都是跨浏览器的,兼容性很好。 由于EXT是由JAVASCRIPT开发的,所以可以运行在所有现有的WEB技术上,比如HTML,JSP,ASP,PHP…
  • 2. EXT 2.0学习和使用总结EXT是由JAVASCRIPT脚本编写成的一个强大的B/S架构下的良好的用户体验的客户端程序。对于饱受网页样式疾苦的广大程序员同志们来讲,EXT让我们看到了黎明的曙光,我们看到了JAVA也可以做的如此的——炫 在这里先给大家发几个截图看看,体会一下
  • 3. 后台管理布局
  • 4. 如此炫目的列表。仿佛让我们回到了VB开发的C/S系统的时光,如果让您把一个网页做到如此效果,您要花多久呢?
  • 5. 别具一格的窗体,多像是C/S架构的窗体啊,可惜,不是,它是一个由脚本构成的网页,集合了现今流行的JSON和AJAX技术,自定义的验证,静态提交数据,静态翻页,基本都是静态的操作
  • 6. HTML的select标签EXT的下拉列表定位功能Select:很抱歉,我不能输入,也没有定位的功能 Combo:我可以读取多种格式的数据,也可以绑定到SELECT标签。获得数据,更重要的是,我可以远程获得数据并且在无刷新的情况下,填充
  • 7. 多么好的时间控件啊,在这里,可以随心所欲的定义时间的输出格式,而且,时间控件还能判断你输入的时间格式是否合法,还有很多功能
  • 8. 小插曲 看了那么多,您一定对EXT的炫目界面所倾倒吧,您是不是在为B/S的UI界面犯愁呢,您是不是想赶快入门呢,如果您准备好了,LET`S GO
  • 9. EXT发布包下载 首先下载EXT发布包 下载 在使用EXT的时候,需要导入下面所列出 的JS类库和CSS样式库 ../../resources/css/ext-all.css ../../adapter/ext/ext-base.js ../../ext-all.js ext-base.js主要是程序架构,和底层支持 ext-all.js主要是所有控件,验证,容器等相关 程序的实现 ext_all.css包含了所有的EXT使用到的样式 build/locale/ext-lang-zh_CN.js是中文翻译。 resources目录下是css样式表和图片。
  • 10. 把EXT部署到TOMCAT上将ext-2.0.2放到tomcat的webapps目录下, 然后启动,部署成功,端口设置成8080,方 便后面案例演示,最好把这个目录放在 TOMCAT下面,里面有拓展控件,下载的没 有。 原因:EXT中文件引用基本上都是相对的,放 在TOMCAT中可以很好的解析
  • 11. 使用前提-导入程序库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.css 2.ext-base.js 3.ext-all.js 4.ext-lang-zh_CN.js
  • 12. 为什么按顺序导入 首先导入ext-all.CSS样式表,是因为在JS文件 里面都用到了ext-all.CSS里面的样式,放后面 的话,程序加载后,就找不到相应的样式, 然后是基础库ext-base.js,看名字就知道,是 基础,当然是最根本的,供其他程序调用的, 在EXT里面所有的控件,列表,验证,等拓展 类都存放在ext-all.js里面,按照自顶向下的运 行原则,加载的顺序就一目了然了.
  • 13. 开发工具spket在使用Ext之前,我先给大家介绍几个开发js常用的工具。 Spket是一款全面支持JavaScript,XUL/XBL,Flex,SVG的免费开发工具。最重要的点是它就像是为Ext量身定作的一样,既可以作为Eclipse的插件,又可以作为独力的IDE。下面说一下spket的安装和使用。最后还会介绍另外一种以link方式安装spket的使用方式。
  • 14. 先介绍一下如何将Spket作为Eclipse的插件来使用。 首先下载Spket的exlipse插件包,从网址http://www.spket.com/download.html, plugin包即是。下载解压后把features和plugin目录中相应文件拷到对应的eclipse相应目录文件下。 然后启动eclipse,也就是我们用的eos工具,依次进入WindowsPreferences选项(eos窗口首选项),在窗口左边可以看到spket菜单项,其中包含了该插件的相关配置。选中JavaScript Profiles选项,会出现JavaScript配置列表。默认情况下,它没有提供对Ext的支持,所以下面我们需要将EXT库添加到列表中,如下图
  • 15. (本页无文本内容)
  • 16. 选 中javascript profiles选项,会出现JavaScript配置列表。默认情况下它没有提供对EXT的支持,所以下面我们需要将EXT库添加到列表中 单击右侧的添加按钮,在弹出的窗口中输入”EXT”,点确定便可以看到EXT的名字已经出现在列表中。 再单击右侧的Add Library,在弹出的窗口中选择ExtJs,然后单击OK按钮,便会看到EXT库列表下成功添加了ExtJs类库,如图
  • 17. 选中库列表,单击右侧的Add File按钮,便可以上传文件,选择下我们下载的EXT包中的ext.jsb文件并打开,可以看到ExtJs类库中多了很多Ext文件。默认选择了Ext Base和Everthing,Ext Base是EXT的核心,Everthing中包含了EXT的source目录下的所有JavaScript文件。 到这里,Spket插件的安装 和配置就已经完成了。 说明:现在最新版本的Ext 3.0.0中没有jsb文件呢,我在ext的论坛上面下载了一个,叫jsb2,现在要下载最新版的spket才支持。 此外还可以下载spket的ide安装包,这样就可以直接使用spket来开发,这个的安装和使用也比较简单,像平常的软件安装方式一样,这里就不再详细说明了。 另外还有两个比较有用的调式工具ie的Microsoft Script Debugger,IEDevToolBarSetup和Firefox和Firebug
  • 18. 组件的介绍Ext组件是由 Component类定义,每一种组件都有一个指定的xtype属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组件。
  • 19. 组件分类基本组件:一些基本的,常用的,功能型组件 工具栏组件:主要是工具栏依靠的组件 表单及元素组件:用于用户输入的组件
  • 20. 基本组件box              Ext.BoxComponent  具有边框属性的组件 button           Ext.Button  按钮 colorpalette     Ext.ColorPalette 调色板 component        Ext.Component 组件 container        Ext.Container 容器 cycle            Ext.CycleButton  dataview         Ext.DataView 数据显示视图 datepicker       Ext.DatePicker 日期选择面板 editor           Ext.Editor 编辑器 editorgrid       Ext.grid.EditorGridPanel 可编辑的表格  grid             Ext.grid.GridPanel 表格 paging           Ext.PagingToolbar 工具栏中的间隔 panel            Ext.Panel 面板 progress         Ext.ProgressBar 进度条 splitbutton      Ext.SplitButton 可分裂的按钮 tabpanel         Ext.TabPanel 选项面板 treepanel        Ext.tree.TreePanel 树 viewport         Ext.ViewPort 视图 window           Ext.Window 窗口
  • 21. toolbar          Ext.Toolbar 工具栏 tbbutton         Ext.Toolbar.Button 按钮 tbfill           Ext.Toolbar.Fill 文件 tbitem           Ext.Toolbar.Item 工具条项目 tbseparator      Ext.Toolbar.Separator 工具栏分隔符 tbspacer         Ext.Toolbar.Spacer 工具栏空白 tbsplit          Ext.Toolbar.SplitButton 工具栏分隔按钮 tbtext           Ext.Toolbar.TextItem 工具栏文本项工具栏组件
  • 22. 表单及元素组件form             Ext.FormPanel Form面板  checkbox         Ext.form.Checkbox checkbox录入框 combo            Ext.form.ComboBox combo选择项 datefield        Ext.form.DateField 日期选择项 field            Ext.form.Field 表单字段 fieldset         Ext.form.FieldSet 表单字段组 hidden           Ext.form.Hidden 表单隐藏域 htmleditor       Ext.form.HtmlEditor html编辑器 numberfield      Ext.form.NumberField 数字编辑器 radio            Ext.form.Radio 单选按钮 textarea         Ext.form.TextArea 区域文本框 textfield        Ext.form.TextField 表单文本框 timefield        Ext.form.TimeField 时间录入项 trigger          Ext.form.TriggerField 触发录入项
  • 23. 程序入口Ext.onReady可能是你接触的第一个方法。这 个方法是指当前DOM加载完毕后,保证页面 内的所有元素能被Script引用(reference )。 你可删除alert()那行,加入一些实际用途的代 码试试: Ext.onReady(function() {               alert(“小周周,你好!"); });
  • 24. 弹出框 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);); 图例:
  • 25. 弹出框 Ext.MessageBox(二)Ext.MessageBox.show();//显示框 Ext.MessageBox.show({ title:'保存吗‘, msg: '你确定保存吗‘, buttons: Ext.MessageBox.YESNOCANCEL}); 图例: 进度条 Ext.MessageBox.show({ title: '请稍等', msg: '正在加载中...', progressText: '加载...', idth:300,progress:true}); 图例: 其他案例
  • 26. 树形菜单Ext的树形菜单有很多样式 官方提供了大约有四种类型的树形菜单 1:Drag and Drop Reordering//拖放树 2:Multiple trees//多重树 3:Column Tree//表头树 当然现在还有很多拓展的树形结构,比如在 下拉框里面拓展一棵树形结构,各位有兴趣 可以自己到网站上下载
  • 27. Drag and Drop Reordering//拖放树Ext.onReady(function(){ var Tree = Ext.tree; var tree = new Tree.TreePanel({ el:'tree-div‘,seArrows:true,autoScroll:true,animate:true, enableDD:true,containerScroll:true, loader: new Tree.TreeLoader({ dataUrl:'get-nodes.jsp' }) }); var root = new Tree.AsyncTreeNode({text: 'Ext JS‘, draggable:false, id:'source'}); tree.setRootNode(root); tree.render(); root.expand(); });
  • 28. Multiple trees//多重树var TreeTest = function(){ var Tree = Ext.tree; return {init : function(){ var tree = new Tree.TreePanel({el:'tree‘, animate:true, autoScroll:true, loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}), enableDD:true, containerScroll: true, dropConfig: {appendOnly:true} }); new Tree.TreeSorter(tree, {folderSort:true}); var root = new Tree.AsyncTreeNode({text: 'Ext JS', draggable:false, id:'source’}); tree.setRootNode(root);tree.render();root.expand(false, /*no anim*/ false); var tree2 = new Tree.TreePanel({el:'tree2‘,animate:true,autoScroll:true, loader: new Ext.tree.TreeLoader({dataUrl:'get-nodes.php‘, baseParams: {lib:'yui'}}), containerScroll: true, enableDD:true, dropConfig: {appendOnly:true}}); new Tree.TreeSorter(tree2, {folderSort:true}); var root2 = new Tree.AsyncTreeNode({text: 'My Files', draggable:false, id:'yui’}); tree2.setRootNode(root2);tree2.render();root2.expand(false, /*no anim*/ false);}};}(); Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
  • 29. Column Tree//表头树Ext.onReady(function(){ var tree = new Ext.tree.ColumnTree({ el:'tree-ct‘,width:552,autoHeight:true,rootVisible:false,autoScroll:true,title: 'Example Tasks', columns:[{header:'Task‘, width:350,dataIndex:'task’}, {header:'Duration‘, width:100, dataIndex:'duration'}, {header:'Assigned To‘, width:100,dataIndex:'user’}], loader: new Ext.tree.TreeLoader({dataUrl:'column-data.json', uiProviders:{ 'col': Ext.tree.ColumnNodeUI } }), root: new Ext.tree.AsyncTreeNode({text:'Tasks’ }) }); tree.render(); });
  • 30. 布局Accordion布局 Border布局 Card布局 Column布局 Fit布局 Form布局 Table布局 Anchor 布局
  • 31. Accordion布局Accordion布局由类Ext.layout.Accordion定义,名称为accordion,表示可折叠的布局,也就是说使用该布局的容器组件中的子元素是可折叠的形式。 后台菜单里每个面板里都是用html的table的布局展现的,这可根据不同的需要,也放放置其它html或ext元素、表单等 查看案例
  • 32. 在布局中配置不同的参数,会展示出不同的效果。 如:animate为true,表示在执行展开折叠时是否应用动画效果。 activeOnTop为true,表示在点击每一个子元素的头部名称或右边的按钮,则会展开该面板,收缩其它已经展开的面板,并将点击的那个面板置于顶部显示。 具体的各个控件的动作和效果大家可以参考http://extjs.com/deploy/dev/docs/的在线api里的说明。
  • 33. Border布局Border布局由类Ext.layout.BorderLayout定义,布局名称为border。该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。 对应的每一块区域,可以通过contentEl: 'west', 指定不同的div层显示不同的内容。 layout之前可以嵌套使用(如:后台首页) 查看案例
  • 34. Card布局Card布局由Ext.layout.CardLayout类定义,名称为card,该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。 该例创建了一个容器组件面板,面板中包含三个子面板元素,父容器包含一个“切换”按钮,点击该按钮将会执行changeTab函数,该函数实现把父容器中的活动面板在三个子元素之间进行切换 查看案例
  • 35. Column布局Column布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。 查看案例
  • 36. Fit布局指定父容器使用Fit布局,因此子元素将自动填满整个父容器。 如果容器组件中有多个子元素,则只会显示一个元素。 查看案例
  • 37. Form布局Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。 面板使用Form布局,面板中包含三个子元素,这些子元素都是文本框字段,在父容器中还通过hideLabels、labelAlign等配置属性来定义了是否隐藏标签、标签对齐方式等。 在实际应用中,Ext.form.FormPanel这个类默认布局使用的是Form布局,而且FormPanel还会创建与
    标签相关的组件,因此一般情况下我们直接使用FormPanel即可。
  • 38. Table布局table布局由类Ext.layout.TableLayout定义,名称为table,该布局负责把容器中的子元素按照类似普通html标签 创建了一个父容器组件,指定使用Table布局,layoutConfig使用columns指定父容器分成3列,子元素中使用rowspan或colspan来指定子元素所横跨的单元格数。 查看案例
  • 39. Anchor 布局由Ext.layout.AnchorLayout定义,名称为Anchor,主要是里面的控件可以随着容器的变化而变化,不论是变大还是变小,控件与容器之间的位置保持相对 查看案例
  • 40. DataProxy与自定义StoreDataProxy字面解释就是数据代理,也可以理解为数据源,也即从哪儿或如何得到需要交给DataReader解析的数据。数据代理(源)基类由Ext.data.DataProxy定义,在DataProxy的基础,ExtJS提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三个分别用于从客户端内存数据、Ajax读取服务器端的数据及从跨域服务器中读取数据等三种实现。
  • 41. 比如像SimpleStore等存储器是直接从从客户端的内存数组中读取数据,此时就可以直接使用Ext.data.MemoryProxy,而大多数需要从服务器端加载的数据直接使用Ext.data.HttpProxy,HttpProxy直接使用Ext.Ajax加载服务器的数据,由于这种请求是不能跨域的,所以要要读取跨域服务器中的数据时就需要使用到Ext.data.ScriptTagProxy。
  • 42. 在实际应用中,除了基本的从内存中读取javascript数组对象,从服务器读取JSON数组,从服务器取xml文档等形式的数据外,有时候还需要使用其它的数据读取方式。当以上这几种方式不能满足需求的时候,我们就需要创建自定义的DataProxy及Store,然后使用这个自定义的Store来处理得到数据。(不过到目前还没有碰到这种另类的情况)
  • 43. Ext.data.HttpProxyapi文档中服务端返回信息时必须指定Content-Type属性为"text/xml",但之前使用基本上都是用“application/x-www-form-urlencoded” HttpProxy( Object conn ) 构造一个HttpProxy对象,参数可以是一个类似于{url: 'test.jsp'}这样的json对象,也可以是一个Ext.data.Connection对象。 getConnection() : Connection 得到当前连接对象
  • 44. load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void 从配置的connection对象得到record数据块,并激发callback params: 发起http请求时所要传递到服务端的参数 DataReader: 见DataReader callback: 回调函数,第一个参数为接收到的信息,第二个参数为arg,第三个是成功标志 scope: 范围 arg: 这儿的参数将会传递给回叫函数callback
  • 45. 示例 var proxy=new Ext.data.HttpProxy({url:'datasource.xml'}); //关于reader将会在Ext.data.DataReader中讲解 var reader = new Ext.data.XmlReader({ totalRecords: "results", record: "row", id: "id" }, [ {name: 'name', mapping: 'name'}, {name: 'occupation'} ]);
  • 46. //定义回叫方法 var metadata; function callback(data,arg,success){ if(success){ metadata=data; } } //从connection配置的url中利用reader将返回的xml文件转为元数据,并传递给callback proxy.load(null,reader,callback,this);
  • 47. Ext.data.MemoryProxyExt.data.MemoryProxy MemoryProxy( Object data ) load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void 取数据,和HttpProxy类似,只是params参数没有被使用
  • 48. 示例var proxy=new Ext.data.MemoryProxy([[1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist']]); var reader = new Ext.data.ArrayReader( {id: 0}, [ {name: 'name', mapping: 1}, {name: 'occupation', mapping: 2} ]); var metadata; function callback(data,arg,success){ metadata=data; } proxy.load( null,reader,callback,this);
  • 49. Ext.data.ScriptTagProxy这个类和HttpProxy类似,也是用于请求远程数据,但能用于跨主域调用,如果请求时使用了callback参数 则服务端应指定Content-Type属性为"text/javascript" 并返回callback(jsonobject) 反之则应置Content-Type属性为"application/x-json" 并直接返回json对象
  • 50. ScriptTagProxy( Object config ) 构造,其中 config定义为{ callbackParam : String, //回调参数 nocache : Boolean, //是否缓存 timeout : Number, //超时 url : String //请求数据的url } load( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void 参见HttpProxy
  • 51. DataReader DataReader表示数据读取器,也就是数据解析器,其负责把从服务器或者内存数组、xml文档中获得的杂乱信息转换成ExtJS中的记录集Record数据对象,并存储到Store里面的记录集数组中。 数据解析器的基类由Ext.data.DataReader定义,其它具体的数据解析器都是该类的子类,ExtJS中提供了读取二维数组、JSon数据及Xml文档的三种数据解析器,分别用于把内存中的二级数组、JSON格式的数据及XML文档信息解析成记录集
  • 52. 下面简单的介绍:1)ArrayReader Ext.data.ArrayReader-数组解析器,用于读取二维数组中的信息,并转换成记录集Record对象。 首先看下面的代码: var MyRecord = Ext.data.Record.create([ {name: 'title', mapping:1}, {name: 'username', mapping:2}, {name: 'loginTimes', type:3} //int ]); var myReader = new Ext.data.ArrayReader({ id: 0 }, MyRecord);
  • 53. 这里定义的myReader可以读取下面的二维数组: [ [1, '测试', '小王',3], [2, '新年好', 'williamraym',13] ] 2)JsonReader Ext.data.JsonReader-Json数据解析器,用于读取JSON格式的数据信息,并转换成记录集Record对象。 在J2EE中可以使用这个解析器来实现JSON数据的生 成JSON_LIB 具体实现方法
  • 54. 看下面使用JsonReader的代码: var MyRecord = Ext.data.Record.create([ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'} ]); var myReader = new Ext.data.JsonReader({ totalProperty: "results", root: "rows", id: "id" }, MyRecord);
  • 55. 这里的JsonReader可以解析下面的JSON数据: { 'results': 2, 'rows': [ { id: 1, title: '测试', author: '小王', loginTimes: 3 }, { id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ] JSonReader还有比较特殊的用法,就是可以把Store中记录集的配置信息存放直接保存在从服务器端返回的JSON数据中,
  • 56. 比如下面的例子: var myReader = new Ext.data.JsonReader(); 这一个不带任何参数的myReader,可以处理从服务器端返回的下面JSON数据: { 'metaData': { totalProperty: 'results', root: 'rows', id: 'id', fields: [ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'} ] },
  • 57. 'results': 2, 'rows': [ { id: 1, title: '测试', author: '小王', loginTimes: 3 }, { id: 2, title: '新年好', author: 'williamraym', loginTimes:13}] } 3)XmlReader Ext.data.XmlReader-XML文档数据解析器,用于把XML文档数据转换成记录集Record对象。看下面的代码:
  • 58. var MyRecord = Ext.data.Record.create([ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'} ]); var myReader = new Ext.data.XmlReader({ totalRecords: "results", record: "rows", id: "id" }, MyRecord); 上面的myReader能够解析下面的xml文档信息:
  • 59. 2 1 测试</ title > <author>小王</ author > <loginTimes>3</ loginTimes > </row> <row> <id>2</id> <title>新年好</ title > <author> williamraym </ author > <loginTimes>13</ loginTimes > </row> </topics> </li><li data-id="60">60. 面板Panel 面板Panel是ExtJS控件的基础,很高级控件都是在面板的基础上扩展的,还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。 面板由以下几个部分组成,一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能,并 提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为,面板可以放入其它任何容器中,面板本身是一个容器,他里面又可以包含各种其它组件。</li><li data-id="61">61. 面板的类名为Ext.Panel,其xtype为panel。 下面的例子可以显示出面板的各个组成部分: 一般情况下,顶部工具栏或底部工具栏只需要一个,而面板中一般也很少直接包含按钮,一般会把面板上的按钮直接放到工具栏上面。 面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏,可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。 查看案例 </li><li data-id="62">62. tools自带的id有: toggle,close,minimize,maximize,restoregear,pin,unpin,right,leftup,down,refresh,minus,plus,help,search,save,print 除了在面板头部加入这些已经定义好的工具栏选择按钮以外,还可以在顶部或底工具栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。 </li><li data-id="63">63. TabPanel为了显示一个面板,我们需要在页面上添加一个div,然后把 Ext控件渲染到这个div上。VeiwPort代表整个浏览器显示区域,该对象渲染到页面的body区域,并会随着浏览器显示区域的大小自动改变,一个 页面中只能有一个ViewPort实例。 Viewport不需要再指定renderTo,而我们也看到Viewport确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。 Viewport主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport上常用的布局有fit、border等,当然在需要的时候其它布局也会常用。 </li><li data-id="64">64. Record 在前面的表格应用中,我们已经知道表格的数据是存放类型为Store的数据存储器中,通过指定表格Grid的store属性来设置表格中显示的数据,通过调用store的load或reload方法可以重新加载表格中的数据。ExtJS中用来定义控件中使用数据的API位于Ext.data命名空间中,我们重点对ExtJS中的数据存储Store进行介绍。</li><li data-id="65">65. 1、Record 首先需要明确是,ExtJS中有一个名为Record的类,表格等控件中使用的数据是存放在Record对象中,一个Record可以理解为关系数据表中的一行,也可以称为记录。Record对象中即包含了记录(行中各列)的定义信息(也就是该记录包含哪些字段,每一个字段的数据类型等),同时又包含了记录具体的数据信息(也就是各个字段的值)。</li><li data-id="66">66. 首先使用Record的create方法创建一个记录集MyRecord,MyRecord其实是一个类,该类包含了记录集的定义信息,可以通过MyRecord来创建包含字段值的Record对象。在上面的代码中,最后的几条语句用来输出记录集的相关信息, MyRecord.getField("username")可以得到记录中username列的字段信息, r.get("loginTimes")可以得到记录loginTimes字段的值,</li><li data-id="67">67. 而r.data.username同样能得到记录集中username字段的值。 对Record有了一定的了解,那么要操作记录集中的数据就非常简单了,比如r.set(name,value)可以设置记录中某指定字段的值,r.dirty (Boolean)可以得到当前记录是否有字段的值被更改过等等。 </li><li data-id="68">68. StoreStore可以理解为数据存储器,可以理解为客户端的小型数据表,提供缓存等功能。在ExtJS中,GridPanel、ComboBox、DataView等控件一般直接与Store打交道,直接通过store来获得控件中需要展现的数据等。一个Store包含多个Record,同时Store又包含了数据来源,数据解析器等相关信息,Store通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy),并转换成记录集的形式保存在Store中,作为其它控件的数据输入。 </li><li data-id="69">69. 数据存储器由Ext.data.Store类定义,一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作,在Ext.data.Store类中数据源由proxy配置属性定义、数据解析(读取)器由reader配置属性定义,一个较为按部就班创建Store的代码如下:</li><li data-id="70">70. var MyRecord = Ext.data.Record.create([ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'}, {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} ]); var dataProxy=new Ext.data.HttpProxy({url:"link.ejf"}); var theReader=new Ext.data.JsonReader({ totalProperty: "results", root: "rows", id: "id" },MyRecord); var store=new Ext.data.Store({ proxy:dataProxy, reader:theReader }); store.load();</li><li data-id="71">71. 当然,这样的难免代码较多,Store中本身提供了一些快捷创建Store的方式,比如上面的示例代码中可以不用先创建一个HttpProxy,只需要在创建Store的时候指定一个url配置参数,就会自动使用HttpProxy来加载参数。比如,上面的代码可以简化成:</li><li data-id="72">72. var MyRecord = Ext.data.Record.create([ {name: 'title'}, {name: 'username', mapping: 'author'}, {name: 'loginTimes', type: 'int'}, {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} ]); var theReader=new Ext.data.JsonReader({ totalProperty: "results", root: "rows", id: "id" },MyRecord); var store=new Ext.data.Store({ url:"link.jsp", proxy:dataProxy, reader:theReader }); store.load(); </li><li data-id="73">73. 虽然不再需要手动创建HttpProxy了,但是仍然需要创建DataReader等,毕竟还是复杂,ExtJS进一步把这种常用的数据存储器进行了封装,在Store类的基础上提供了SimpleStore、SimpleStore、GroupingStore等,直接使用SimpleStore,则上面的代码可以进一步简化成下面的内容</li><li data-id="74">74. var store=new Ext.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(); </li><li data-id="75">75. TreePanel在应用程序中,我们经常会涉及到要显示或处理树状结构的对象信息,比如部门信息、地区信息,或者是树状的菜单信息,操作系统中的文件夹信息等。 对于传统的html页面来说,要自己实现显示树比较困难,需要写很多的javascript,特别是对于基于Ajax异步加载的树来说,不但涉及到Ajax数据加载及处理技术,还需要考虑跨浏览器支持等,处理起来非常麻烦。ExtJS中提供了现存的树控件,通过这些控件可以在B/S应用中快速开发出包含树结构信息的应用。</li><li data-id="76">76. TreePanel基本使用树控件由Ext.tree.TreePanel类定义,控件的名称为treepanel,TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单。 http://localhost:8080/zszq/extDemo/tree/tree1.jsp Ext.onReady(function(){ var root=new Ext.tree.TreeNode({ id:"root", text:"树的根"}); root.appendChild(new Ext.tree.TreeNode({ id:"c1", text:"子节点" })); var tree=new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:100 }); }); </li><li data-id="77">77. 代码的第一句使用new Ext.tree.TreeNode类来创建一个树节点,第二句使用树节点的root的appendChild方法来往该节点中加入一个子节点,最后直接使用new Ext.tree.TreePanel来创建一个树面板,要树面板的初始化参数中指定树的root属性值为前面创建的root节点,也就是树根节点。 树的节点信息。ExtJS的树控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,可以用来从服务器端动态加载树的节点信息。 查看案例</li><li data-id="78">78. 当然上面的程序是一次性加载完了树的所有节点信息,我们也可以实现让每一个节点都支持动态加载的树,只需要在通过服务器请求数据的时候,每次服务器端返回的数据只只包含子节点,而不用把孙子节点也返回即可。 也就是节点树中只包含一个子节点,而该子节点通过指定leaf值为false (默认情况该值为false),表示该节点不是一个叶子节点,其下面还有指节点。再执行前面的程序,不断点击“子节点”。 </li><li data-id="79">79. 事件处理当然,仅仅能显示一棵树还不够,我们一般还需要在用户点击树节点的时候执行相应的东西,比如打开某一个连接,执行某一个函数等,这就需要使用到事件处理。 执行上面的程序,当用户点击树控件中的任意节点时,都会弹出一个提示信息框,当用户点击c1这个子节点时,会弹出两次提示信息框。因为我们除了指定tree的click事件响应函数以外,另外又给node节点指定单独的事件响应函数。</li><li data-id="80">80. 当然,如果只是要实现当点击树节点时跳到某一个指定url的功能则非常简单。 执行程序,点击树节点,将会在浏览新窗口中打开节点中href指定的链接。 具体实现可参考docs.js onClick和loadClass就是方法入口 </li><li data-id="81">81. 对于ExtJS中的树来说,树加载器TreeLoader是一个比较关键的部件,树加载器由Ext.tree.TreeLoader类定义,只有AsyncTreeNode才会使用TreeLoader。 Ext.onReady(function(){ var loader=new Ext.tree.TreeLoader({ url:"treedata.js" }); var root=new Ext.tree.AsyncTreeNode({ id:"root", text:"根节点", loader:loader}); </li><li data-id="82">82. var tree=new Ext.tree.TreePanel({ renderTo:"hello", root:root, width:100 }); }); 首先我们使用Ext.tree.TreeLoader来初始化了一个TreeLoader对象,构造函数中的配置参数url表示获得树节点信息的url。然后在初始化根节点的时候我们使用的是AsyncTreeNode,在该节点中指定该节点的laoder为前面定义的loader。执行这段程序,在点击“根节点”时,会从服务器端指定root节点的子节点信息。</li><li data-id="83">83. TreeLoader严格来说是针对树的节点来定义的,可以给树中的每一个节点定义不同的TreeLoader,默认情况下,如果一个AsyncTreeNode节点在准备加载子节点的时候,如果该节点上没有定义loader,则会使用TreePanel中定义的loader作为加载器。因此,我们可以直接在TreePanel上面指定loader属性,这样就不需要给每一个节点指定具体的TreeLoader了。 </li><li data-id="84">84. 在ExtJS中,不管是叶子节点还是非叶子节点,都统一用TreeNode表表示树的节点。在ExtJS中,有两种类型的树节点。一种节点是普通的简单树节点,由Ext.tree.TreeNode定义,另外一种是需要异步加载子节点信息的树节点,该类由Ext.tree.AsyncTreeNode定义。 </li><li data-id="85">85. 处理机制ExtJS提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监控控件状 态变化、更新控件视图信息、与服务器进行交互等等。事件统一由Ext.EventManager对象管理,与浏览器W3C标准事件对象Event相对 应,Ext封装了一个Ext.EventObject事件对象。支持事件处理的类(或接口)为Ext.util.Observable,凡是继承该类的组 件或类都支持往对象中添加事件处理及响应功能。 首先我们来看标准html中的事件处理,</li><li data-id="86">86. 看下面的html代码: <script> function a() { alert('some thing'); } </script> <input id="btnAlert“ type="button“ onclick="a();“ value="alert框“ /> 点击这个按钮则会触发onclick事件,并执行onclick事件处理函数中指定的代码,这里直接执行函数a中的代码,也即弹出一个简单的信息提示框。再简单修改一下上面的代码,内容如下:</li><li data-id="87">87. <script> function a(){ alert('some thing');} window.onload=function(){ document.getElementById("btnAlert"). onclick=a; } </script> <input id="btnAlert" type="button" value="alert框" /> 上面的代码在文档加载的时候,就直接对btnAlert的onclick赋值,非常清晰的指明了按钮btnAlert的onclick事件响应函数为a,注意这里a后面不能使用括号“()”。 </li><li data-id="88">88. xtJS中组件的事件处理跟上面相似,看下面的代码: <script> function a(){ alert('some thing'); } Ext.onReady(function(){ Ext.get("btnAlert").addListener("click",a); }); </script> <input id="btnAlert" type="button" value="alert框" /> </li><li data-id="89">89. Ext.get("btnAlert")得到一个与页面中按钮btnAlert关联的Ext.Element对象,可以直接调用该对象上的 addListener方法来给对象添加事件,同样实现前面的效果。在调用addListener 方法的代码中,第一个参数表示事件名称,第二个参数表示事件处理器或整个响应函数。 ExtJS支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,看下面的代码: </li><li data-id="90">90. Ext.onReady(function(){ Ext.get("btnAlert").on("click",a); Ext.get("btnAlert").on("click",a); }); addLinster方法的另外一个简写形式是on,由于调用了两次addListener方法,因此当点击按钮的时候会弹出两次信息。 当然,ExtJS还支持事件延迟处理或事件处理缓存等功能,比如下面的代码: </li><li data-id="91">91. Ext.onReady(function(){ Ext.get("btnAlert").on("click",a,this,{delay:2000}); }); 由于在调用addListener的时候传递指定的delay为2000,因此当用户点击按钮的时候,不会马上执行事件响应函数,而是在2000毫秒,也就是两秒后才会弹出提示信息框。 当然,在使用Ext的事件时,我们一般是直接在控件上事件,每一个控件包含哪些事件,在什么时候触发,触发时传递的参数等,在ExtJS项目的文档中 都有较为详细的说明。比如对于所有的组件Component,都包含一个beforedestroy事件,该事件会在Ext销毁这一个组件时触发,如果事 件响应函数返回false,则会取消组件的销毁操作。 </li><li data-id="92">92. Ext.onReady(function(){ var win=new Ext.Window({ title:"不能关闭的窗口", height:200, width:300 }); win.on("beforedestroy",function(obj){ alert("想关闭我,这是不可能的!"); obj.show(); return false; }); win.show(); }); 由于在窗口对象的beforedestroy事件响应函数返回值为false,因此执行这段程序,你会发现这个窗口将无法关闭。组件的事件监听器可以直接在组件的配置属性中直接声明,如下面的代码与前面实现的功能一样</li><li data-id="93">93. Ext.onReady(function(){ var win=new Ext.Window({ title:"不能关闭的窗口", height:200, width:300, listeners:{"beforedestroy":function(obj){ alert("想关闭我,这是不可能的!"); obj.show(); return false; }} }); win.show(); }); 了解了ExtJS中的基本事件处理及使用方法,就可以在你的应用中随心所欲的进行事件相关处理操作了。 </li><li data-id="94">94. 可编辑表格可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑,ExtJS中的可编辑表格由类Ext.grid.EditorGridPanel表示,xtype为editorgrid。使用EditorGridPanel与使用普通的GridPanel方式一样,区别只是在定义列信息的时候,可以指定某一列使用的编辑即可,下面来看一个简单的示例。 参考案例</li><li data-id="95">95. 上面的程序首先定义了一个包含学生信息的对象数组,然后创建了一个JsonStore,在创建这个store的时候,指定bornDate列的类型为日期date类型,并使用dateFormat来指定日期信息的格式为"Y-n-j",Y代表年,n代表月,j代表日期。定义表格列模型的时候,对于“姓名”及“电子邮件”列我们使用editor来定义该列使用的编辑器,这里是使用Ext.form.TextField,最后使用new Ext.grid.EditorGridPanel(…)来创建一个可编辑的表格。执行上面的程序可以生成一个表格,双击表格中的“姓名”、或“电子邮件”单元格中的信息可以触发单元格的编辑,可以在单元格的文本框中直接编辑表格中的内容,修改过的单元格会有特殊的标记。 </li><li data-id="96">96. 为了能编辑“性别”及“出生日期”列,同样只需要在定义该列的时候指定editor即可。由于出生日期是日期类型,因此我们可以使用日期编辑器来编辑,“性别”一列的数据不应该让用户直接输入,而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件,下拉选择框编辑器可以使用Ext.form.ComboBox组件。</li><li data-id="97">97. 注意在定义EditorGridPanel的时候,我们增加了一个属性“clicksToEdit:1”,表示点击一次单元格即触发编辑,因为默认情况下该值为2,需要双击单元格才能编辑。为了给ComboBox中填充数据,我们使用设置了该组件的transform配置属性值为sexList,sexList是一个传统的<select>框,我们需要在html页面中直接定义。 </li><li data-id="98">98. 那么如何保存编辑后的数据呢? 答案是直接使用afteredit事件。当对一个单元格进行编辑完之后,就会触发afteredit事件,可以通过该事件处理函数来处理单元格的信息编辑,把编辑后的数据保存到服务器。(例略) </li><li data-id="99">99. GridPanelExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStore、GroupingStore等。</li><li data-id="100">100. 案例和代码 打开代码,我们可以看到 var myData =…”用来定义表格中要显示的数据,这是一个[][]二维数组; var store=…”用来创建一个数据存储,这是GridPanel需要使用配置属性,数据存储器Store负责把各种各样的数据(如二维数组、JSon对象数组、xml文本)等转换成ExtJS的数据记录集Record,关于数据存储器Store我们将在下一章中作专门介绍。 var grid = new Ext.grid.GridPanel(…)”负责创建一个表格,表格包含的列由columns配置属性来描述,columns是一数组,每一行数据元素描述表格的一列信息,表格的列信息包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等,在上面的列子中只用到了header及dataIndex。 </li><li data-id="101">101. 表格的排序及隐藏列特性,直接使用new Ext.grid.ColumnModel来创建表格的列信定义信息,列头(column)的sortable默认为true,表示该列可以排序。你还可以选择显示的列,最少显示一列。 在Change列中怎么实现数字显示的变色呢,是renderer方法在起作用,详细使用方法如下: renderer:function(value,metadata,css,attr,record,rowIndex,colIndex ,store){ if(value> 0){return '<span style="color:green;">' + value+ '</span>';} else if(value < 0){return '<span style="color:red;">' + value + '</span>‘;} return value; } 方法中的参数可以选择使用部分,比如只使用value 自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息,只是的浏览器能处理的html都可以。 </li><li data-id="102">102. 拓展部分-Form文件上传1:先将Form中的fileUpload属性设置成true 2:创建textfield将inputType属性设置为'file‘ 3:实现后台上传文件的方法,建议最好使用 APATCH组件中的上传方法 实现方法</li><li data-id="103">103. 拓展部分-combo一般combo案例 多选combo 注意:在ext-all.css里面添加如下样式 .checked{background-image:url(../images/default/menu/checked.gif)} .unchecked{background-image:url(../images/default/menu/unchecked.gif)} 带图标的combo</li><li data-id="104">104. 如何在Eclipse上安装EXT插件采用link方式安装插件,首先下载Spket,然后开始安装 1:把压缩文件打开,然后创建一个文件夹Spket,将eclipse目录放在Spket里面,完了以后把这个放着一个你想要放的地方,比如F盘下面,那么你的目录就是f:\\Spket 2:在你的eclipse/links目录下面创建一个Spket.link文件,里面这样写  path=f:\\Spket 3:重启你的eclipse 4:打开window-preferences-Spket-javaScript Profiles 5:new,输入ExtJs,并选择ExtJs 6:add Library,从列表里面选择ExtJS 7:add File 找到你放ext类库的地方,选择\source\ext.jsb 8:选择ExtJS,点击default,然后确定 9:创建一个.JS文件,在里面输入EXT.有提示表示成功</li> </ul> </div> <div role="tabpanel" class="tab-pane active" id="profile"> <img class="detail-img" src="https://sppt.open-open.com/image/2aeedeec9e6950901edc29e03b721303_all"> </div> </div> </div> </div> <div class="col-md-4"> <div class="box side-box "> <div class="title"> <h3><i class="fa fa-tags" aria-hidden="true"></i> 关键词</h3> </div> <p class="tags mt10"> <a class="" href="/ppt/tag/extjs.html">ExtJS</a> <a class="" href="/ppt/tag/javascript-kuangjia.html">JavaScript框架</a> <a class="" href="/ppt/tag/css.html">CSS</a> <a class="" href="/ppt/tag/html.html">HTML</a> <a class="" href="/ppt/tag/java.html">Java</a> </p> </div> <div class="box side-box "> <div class="title"> <h3>相关PPT</h3> </div> <div class="items"> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/72d41670c64e48189ee4593ea988aaab.html" target="_blank"><img src="https://sppt.open-open.com/img_w/2aeedeec9e6950901edc29e03b721303_0_100"></a></div><div class="content"><a href="/ppt/72d41670c64e48189ee4593ea988aaab.html"> EXT 用法简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/def89c654bbc41008f041ca6b9115a8b.html" target="_blank"><img src="https://sppt.open-open.com/img_w/e1817a7920f798af820c59a50c72c816_0_100"></a></div><div class="content"><a href="/ppt/def89c654bbc41008f041ca6b9115a8b.html"> Ext JS 开发框架简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/d7b8cc349e46428d95f259d4a067f03b.html" target="_blank"><img src="https://sppt.open-open.com/img_w/dced126290385aa8a5fa182af539613f_0_100"></a></div><div class="content"><a href="/ppt/d7b8cc349e46428d95f259d4a067f03b.html"> ExtJS简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/cd39c9ecb77d448db59bc8f4f8a0a724.html" target="_blank"><img src="https://sppt.open-open.com/img_w/5325bfd4b0d26a11620910b0a50e3f38_0_100"></a></div><div class="content"><a href="/ppt/cd39c9ecb77d448db59bc8f4f8a0a724.html"> extjs框架简介</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/ce291f17c5584b5e865064663dd79a7f.html" target="_blank"><img src="https://sppt.open-open.com/img_w/c72ba4567faeacfe9ffc695ffcbb805c_0_100"></a></div><div class="content"><a href="/ppt/ce291f17c5584b5e865064663dd79a7f.html"> 《Easy-Ext》第一讲:HelloWorld</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/92d084cf87aa4b8181fffd8251b20624.html" target="_blank"><img src="https://sppt.open-open.com/img_w/4db80b1be9af8081d00a628cd057406a_0_100"></a></div><div class="content"><a href="/ppt/92d084cf87aa4b8181fffd8251b20624.html"> Ext开发视频教程</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/0d3120ca871f4f549c8db4a561ae916c.html" target="_blank"><img src="https://sppt.open-open.com/img_w/4473c52709085f034764a1b04b527e87_0_100"></a></div><div class="content"><a href="/ppt/0d3120ca871f4f549c8db4a561ae916c.html"> 《Easy-Ext》第四讲Ext基础架构_基本使用(一)</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/93f4d9a1999340f383213940b965c0ab.html" target="_blank"><img src="https://sppt.open-open.com/img_w/17fa5293d89bce83b045ca6955cdea84_0_100"></a></div><div class="content"><a href="/ppt/93f4d9a1999340f383213940b965c0ab.html"> 《Easy-Ext》第五讲Ext基础架构_操作DOM(二)</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/fc7e13c2a4cd4be69b66970d792660e3.html" target="_blank"><img src="https://sppt.open-open.com/img_w/3083db4f6bc4042e4be97a514d500980_0_100"></a></div><div class="content"><a href="/ppt/fc7e13c2a4cd4be69b66970d792660e3.html"> 《Easy-Ext》第六讲Ext基础架构_事件机制(三)</a></div></div> <div class="item mt10 clearfix"><div class="image" style="width: 100px;"><a href="/ppt/41ef099741c543ed94577e907232942e.html" target="_blank"><img src="https://sppt.open-open.com/img_w/b227e17b0d3f86d32373408fa78bd8d8_0_100"></a></div><div class="content"><a href="/ppt/41ef099741c543ed94577e907232942e.html"> 《Easy-Ext》第三讲第一个组件Ext.window</a></div></div> </div> </div> </div> </div> </div> </div> <footer > <div class="container py-5"> <div class="row"> <div class="col-md-3"> <h5>社区</h5> <div class="row"><div class="col-md-6"><a class="text-muted" href="/project/">项目</a></div><div class="col-md-6"><a class="text-muted" href="/solution/">问答</a></div><div class="col-md-6"><a class="text-muted" href="/wenku/">文库</a></div><div class="col-md-6"><a class="text-muted" href="/code/">代码</a></div><div class="col-md-6"><a class="text-muted" href="/lib/">经验</a></div><div class="col-md-6"><a class="text-muted" href="/news/">资讯</a></div></div> <ul class="list-unstyled text-small ut-mt20"><li><a class="text-muted" title=" 安卓开发专栏" target="_blank" href="http://www.open-open.com/lib/list/177">安卓开发专栏</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/tag/开发者周刊" target="_blank" rel="tag">开发者周刊</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497562965.html" target="_blank" rel="tag">Android Studio 使用推荐</a></li><li><a class="text-muted" href="http://www.open-open.com/lib/view/open1475497355674.html" target="_blank" rel="tag">Android开发推荐</a></li></ul> </div> <div class="col-md-3"> <h5>帮助中心</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/upload.html">文档上传须知</a></li></ul> <h5>关于我们</h5> <ul class="list-unstyled text-small"><li><a class="text-muted" href="/about.html">关于深度开源</a></li><li><a class="text-muted" href="/duty.html">免责声明</a></li><li><a class="text-muted" href="/contact.html">联系我们</a></li></ul> </div> <div class="col-md-6 text-center"><img class=center-block src="https://static.open-open.com/img/logo01.svg" width=190px alt="深度开源"><small class="d-block mb-3 text-muted ut-mt40">© 2006-2019 深度开源 —— 开源项目,开源代码,开源文档,开源新闻,开源社区  杭州精创信息技术有限公司  <br/><br/><img src="https://static.open-open.com/img/beian.png"/><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010602002439">  浙公网安备 33010602002439号</a>  <a target="_blank" href="https://www.miibeian.gov.cn/">浙ICP备09019653号-31</a></small></div> </div> </div> </footer> <div id="fTools"><span id="gotop"> <i class="fa fa-arrow-up" aria-hidden="true"></i> </span><span id="feedback" title="建议反馈"> <i class="fa fa-inbox" aria-hidden="true"></i></span></div> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script type="text/javascript" src="https://static.open-open.com/js/lib.js"></script> <script type="text/javascript" src="https://static.open-open.com/assets/jquery-confirm/jquery-confirm.js?v=4.7.0"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://static.open-open.com/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://static.open-open.com/js/base.js?v=2.002"></script> <script type="text/javascript" src="https://static.open-open.com/js/jq-plug.js?v=2.002"></script> <script> $(function () { JC.reminderPop();//弹出用户信息 $(".link-login").click(function(){ JC.lORr('login'); }); $("#topSearch").searchInit(); //用户登录状态 JC.setLogin(false); }); </script> <!-- JavaScript at the bottom for fast page loading --> <script type="text/javascript" src="https://static.open-open.com/js/playslides.js?v=2.001"></script> <script> JC.init("", "7152", "ppt", 6,false); var consume_gold_cost = 5, uId = "", cId = "7152", slug = "72d41670c64e48189ee4593ea988aaab", title = "EXT 用法简介", summary = ""; var category_name = ""; var tagList = [{id:180, name: "ExtJS"}, {id:3757, name: "JavaScript框架"}, {id:94, name: "CSS"}, {id:123, name: "HTML"}, {id:61, name: "Java"}]; var num_page = "1"; var jc = {}, fav = []; $(function () { window._bd_share_config = {"common": {"bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "32"}, "share": {}};with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'https://static.open-open.com/assets/baidushare/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)]; var images = {thumb: [], big: []}; var pages =104; var img = 'https://sppt.open-open.com/image/2aeedeec9e6950901edc29e03b721303_'; for (var i = 0; i < pages; i++) { images.thumb.push(img + i + "_98_54"); images.big.push(img + i); } var slide = $('.slide-box').pss({autoSlide: false, scale: [16, 9], images: images, maxHeight: 405}); $("#article_content li").click(function () {slide.slide_goto($(this).data("id"));$('body,html').animate({scrollTop:0}, 500);}); }); </script> <script src="https://static.open-open.com/js/docshow.js?v=2.001"></script> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); (function () {var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?40291de101d60af5180c55eb7057c18e";document.write('<script src="' + src + '" id="sozz"><\/script>');})(); </script> <!-- end scripts --> </body> </html>