Ext入门学习精品资料.docx

《Ext入门学习精品资料.docx》由会员分享，可在线阅读，更多相关《Ext入门学习精品资料.docx（59页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Ext入门学习一：Ext是什么ExtJS是一个javascript框架，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用。ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件。二：Ext能干什么主要是用来制作富客户端的Web应用。包括但不限于：（1） 可以动态创建web组件，动态维护web的Dom对象（2） 灵活地获取界面组件对象，方便对对象的操作和控制（3） 大量的组件对象帮助构建复杂的web应用（4） 友好的Ajax支持（5） 完善的事件处理机制三：Ext有什么四：Ext

2、的HelloWorld1：环境准备（1）到官网上下载最新的版本，目前是ext-3.3-beta（2）下载后解压后，看看里面的包结构：adapter：负责将里面提供的第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。build： 压缩后的ext全部源码(里面分类存放)。 docs： API帮助文档。 exmaples：提供使用ExtJs技术做出的小实例。 resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。 package：按包分类的源码source： 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 Ext

3、-all.js：压缩后的Ext全部源码。 ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。 ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。 ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。（3）开发的时候只需要把resources包中的css和images放到common下面，还有把ext-all.js和adapter/ext/ext-base.js放入到js中就可以了2：HelloWorld.htmlExt.onReady(function() alert(Hello Ex

4、t3.0，你好);); 五：Ext的面向对象简介/相当于Java的packageExt.namespace(Ext.cc);/完全使用Ext的创建对象语法太繁琐，还是用我们熟悉的js的语法来写Ext.cc.Class1=function() this.aa = cc; this.t1=function() this.aa=t1; ;Ext.cc.Class2=function() this.t1=function() this.aa=cc2 tt2; ;/表示Class2继承Class1，这里面没有采用Ext的extendsExt.cc.Class2.prototype=new Ext.cc.

5、Class1();/或者使用这个Ext提供的语法/Ext.extend(Ext.cc.Class2,Ext.cc.Class1);/这个是Ext可以给一个对象动态的追加属性和方法 Ext.apply(Ext.cc.Class1.prototype,bb:bb,cc:cc,dd:function()alert(ddd);六：如何获取界面上的元素Ext的选择器1：Ext.Element：Ext的核心对象，是Ext的基础。Element包含了常见的DOM方法和属性，提供一个快捷的、统一的、跨浏览器的接口（若使用Element.dom的话，就可以直接访问底层DOM的节点。）； 2：Ext.get(要获

6、取对象的id)Element.get()方法提供内置缓存（Cache），多次访问同一对象效率上有极大优势； 内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（添加/移除 CSS 类, 添加/移除事件处理程序, 定位, 改变大小, 动画, 拖放）。3：获取多个元素DomQuery（1）元素选择符selector：Ext.query(元素类型名称如：”div”);Ext.query(第一个参数元素类型名称，第二个参数是#元素的id);Ext.query(#元素的id);Ext.query(.元素的class);Ext.query(*号返回所有的元素);Ext.query

7、(div input)/获取div下的子元素(2)属性选择符Ext.query(*class)/获取所有有class属性的元素Ext.query(*class=hello )/获取所有class=hello的元素Ext.query(*class!=hello )/ 获取所有class不等于hello的元素Ext.query(*class=h )/ 获取所有以h开头的元素Ext.query(*class$=h )/ 获取所有以h结尾的元素Ext.query(*class*=hello )/ 获取所有包含hello的元素（3）CSS值元素选择符语法格式：元素CSS的属性 操作符 值Ext.quer

8、y(*color=red)/获取Css属性中color为red的元素操作符同样可以是：!=,$,*等（4）伪类选择符Ext.query(span:first-child); / SPAN元素为, 其父元素的第一个子元素Ext.query(a:last-child) /A元素为其父元素的最后一个子元素Ext.query(span:nth-child(2) /SPAN元素为其父元素的第2个子元素（由1开始的个数）Ext.query(tr:nth-child(odd) /TR元素为其父元素的奇数个数的子元素Ext.query(li:nth-child(even) /LI元素为其父元素的偶数个数的子元

9、素Ext.query(a:only-child) /返回A元素，A元素为其父元素的唯一子元素Ext.query(input:checked) /返回所有选中的（checked）的INPUT元素Ext.query(tr:first) /返回第一个的TR元素Ext.query(input:last) /返回最后一个的INPUT元素Ext.query(td:nth(2) /返回第二个的TD元素Ext.query(div:contains(within) /返回每一个包含“within”字符串的DIVExt.query(div:not(form) /返回没有包含FORM子元素以外的那些DIVExt.q

10、uery(div:has(a) /返回包含有A元素的那些DIV集合Ext.query(td:next(td) /返回接着会继续有TD的那些TD集合。尤其一个地方是，如果使用了colspan属性的TD便会忽略Ext.query(label:prev(input)/返回居前于INPUT元素的那些LABEL元素集合Ext.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等查找出一个或多个元素。区别在于返回类型上。分别是：query方法返回的是JavaScript标准的数组类型；select方法返回的是CompositeElement类型，试比较七：响应事件E

11、xt.get(btn_add).on(click,function()alert(哈哈，点击了););添加事件方式跟JQuery类似。如何得知这个event handler执行时是作用在哪一个特定的元素上呢？自动传入event:Ext.get(btn_add).on(click,function(e)alert(哈哈，点击了=+e.target.value););八：数据操作Store、Record、Reader等Store是在Js端的小型内存数据中心，js组件从store里面取值Record是记录，主要就是描述store里面每一条值，基本是key-valueReader是解析器，就是从原始数

12、据读成需要的对象。比如：var sexStore = new Ext.data.JsonStore( url: a.jsp, fields: sexTrue, sexShow , listeners: load: function() alert(now load); ); sexStore.load(); 后台返回的值：九：使用组件Widgets1：Ext.Button（1）/初始化var btn_add = new Ext.Button( /设置属性 text:新增, /显示出来 renderTo:Ext.getBody();（2）/显示按钮的属性，要注意这个text和上面的text在Ex

13、t里面不同，上面那个是Config，用在构造对象的时候，这个是属性，用来取值用alert(btn_add.text);（3）添加事件： var btn_add = new Ext.Button( text:新增, renderTo:Ext.getBody(), handler:function() alert(哈哈，点击我); );handler ：用于处理默认的事件，button就是click还有一种跟swing一样的机制，listeners: var btn_add = new Ext.Button( text:新增, renderTo:Ext.getBody(), handler:fun

14、ction() alert(哈哈，点击我); , listeners: click:function() alert(now is click11); , click:function() alert(now is click22); , afterrender:function() alert(afterrender); );A：可以在listeners里面添加很多事件注册B：相同的事件，后面的覆盖掉前面的，但不影响handler的触发还有一种写法： var btn_add = new Ext.Button( text:新增, minWidth:100, renderTo:Ext.getBo

15、dy(), handler:function() alert(哈哈，点击我); , listeners: click:function() alert(now is click11); , click:function() alert(now is click22); , afterrender:function() alert(afterrender); ); btn_add.on(click,function()alert(now is click333);); btn_add.on(click,function()alert(now is click444););A：可以添加很多个，相同

16、的也没有关系，都会运行，形成一个事件链B：可以和handler、listeners共存2：Ext.form.TextFieldExt.onReady(function() var btn_add = new Ext.Button( text:新增, renderTo:Ext.getBody() ); btn_add.on(click,function() alert(now is click444=+userId.getValue(); ); var userId = new Ext.form.TextField( fieldLabel:用户编号, renderTo:Ext.getBody()

17、 ););A：会发现：虽然出现了文本框，而且可以操作，点击按钮也能取得文本框的值，但是前面的标签并没有出来，原因是没有使用布局，layout。这里应该使用Ext.layout.FormLayout，布局的宿主对象必须是Ext.Container或者其子类。B：只要在构造对象的时候，在宿主对象上指定layout:”form”就好了。C：Ext.Container的子类主要有：Panel, Toolbar, Viewport, Menu所以修改成如下：Ext.onReady(function() var btn_add = new Ext.Button( text:新增 ); btn_add.on

18、(click,function() alert(now is click444=+userId.getValue(); userId.setValue(updateddd); ); var userId = new Ext.form.TextField( fieldLabel:用户编号, id:userId ); var addPanel = new Ext.Panel( renderTo:Ext.getBody(), layout:form, labelWidth:70, listeners: render:function(addPanel) addPanel.add(userId); a

19、ddPanel.add(btn_add); );); A：跟swing中一样，用panel来组织页面，其他组件就不需要renderto了B：取值赋值使用getValue和setValue3：Ext.panel完全模拟Swing中的写法Ext.onReady(function() /定义组件 var btn_add = new Ext.Button( /设置属性 text:新增 ); /设置事件 btn_add.on(click,function() alert(now is click444=+Ext.get(userId).getValue(); userId.setValue(update

20、ddd); ); /定义组件 var userId = new Ext.form.TextField( fieldLabel:用户编号, id:userId ); /定义面板 var addPanel = new Ext.Panel( layout:form, width:300, height:400, labelWidth:70 ); /把组件放到panel里面 addPanel.add(userId); addPanel.add(btn_add); /把panel放到body里面显示出来 addPanel.render(Ext.getBody();); A：也可以使用xtype的特性来简

21、化代码,如下： addPanel.add(xtype:textfield,fieldLabel:用户名称);B：Ext为了简化代码，使下载量变小，提供了items和buttons，如下：Ext.onReady(function() var addPanel = new Ext.Panel( layout:form, width:300, height:400, labelWidth:70, title:用户新增界面, renderTo:Ext.getBody(), items: xtype:textfield, fieldLabel:用户编号, id:userId , xtype:textfi

22、eld, fieldLabel:用户姓名, id:userName , buttons: xtype:button, text:新增, listeners: click:function() alert(now add=+Ext.get(userId).getValue(); , xtype:button, text:取消 ); ); 常见布局所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持而局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。 ExtJS的布局基类为Ext.layout.ContainerLayout，其

23、它布局都是继承该类。Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。 常用的布局有border、column、form、card、table等布局。Form布局前面已经用了Column布局用来实现左右分的，也就是实现一行排多个，如下示例：Ext.onReady(function() var addPanel = new Ext.Panel( layout:form, width:600, height:400,

24、labelWidth:70, title:用户新增界面, renderTo:Ext.getBody(), items: layout:column, items: columnWidth:.5, layout:form, items: xtype:textfield, fieldLabel:用户编号, id:userId , xtype:textfield, fieldLabel:用户姓名, id:userName , columnWidth:.5, layout:form, items: xtype:textfield, fieldLabel:用户年龄, id:userAge , xtype

25、:textfield, fieldLabel:用户性别, id:sex , buttons: xtype:button, text:新增, listeners: click:function() alert(now login=+Ext.get(userId).getValue(); , xtype:button, text:取消 ); ); Border布局Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, center来表示，在往容器中添加子元素的时候，我们

26、只需要指定这些子元素所在的位置，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:右边面板 ); );Accordio

27、n布局（可折叠布局）Ext.onReady(function() new Ext.Panel( renderTo:hello, title:容器组件, width:500, height:200, layout:accordion, layoutConfig: animate: true , items: title:子元素1, html:这是子元素1中的内容 , title:子元素2, html:这是子元素2中的内容 , title:子元素3, html:这是子元素3中的内容 ); );Card布局Ext.onReady(function() var panel=new Ext.Panel(

28、 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; );Table布局Ext.onReady(function() var panel=new Ext.Panel( renderTo:hello, title:容器组件,