《EtJS培训进阶教程》由会员分享，可在线阅读，更多相关《EtJS培训进阶教程（29页珍藏版）》请在金锄头文库上搜索。
1、Extjs入门培训软件就是服务30 / 30目录1什么是ExtJs32ExtJs的使用32.1获取ExtJs32.2应用Extjs32.3演示HelloWorld43get,getDOM,getCmp43.1getDom方法43.2get方法53.3getCmp方法54事件105ExtJs所包含组件105.1ExtJS组件分类106ExtJs常用组件介绍126.1Panel组件126.1.1panel示例136.1.2panel的布局146.1.3panel属性简介166.2ViewPort组件176.3表格控件及其内部属性186.3.1简单的Grid186.3.2Grid的功能详解216.4
2、按钮287Ext.Ajax.request308Ext同步/异步请求311 什么是ExtJsExtJs是可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJs是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJs用在.Net、Java、Php等各种开发语言开发的应用中。2 ExtJs的使用2.1 获取ExtJs获取ExtJs网址：http:/ 应用Extjs 应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件
3、主要包含两个，adapter/ext/ext-base.js及ext-all.js(ext/build/locale/ext-lang-zh_CN.js)，其中ext-base.js表示框架基础库，ext-all.js是 extjs的核心库。ext-base.js顺序必须在ext-all.js的前面，resources/css/ext-all.css位置随意。在ExtJs库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的。2.3 演示HelloWorld3 get,getDOM,getCmpv 要
4、学习及应用好Ext框架，必须需要理解Html DOM、Ext Element及Component三者之间的区别。每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DO
5、M，Element对象中添加了一系列快捷、简便的实用方法。3.1 getDom方法getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。 (与 getElementById是一个效果)；Ext.onReady(function()var e=new Ext.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom); );/Html页面中包含一个id为hello的div，代码如下： aaa3.2 get方法get方法中只
6、有一个参数，这个参数是混合参数，可以是 DOM节点的id、也可以是一个Element、或者是一个DOM 节点对象等。get方法其实是Ext.Element.get的简写形式。Ext.onReady(function()var e=new Ext.Element(hello);Ext.get(hello);Ext.get(document.getElementById(hello);Ext.get(e); ); /Html页面中包含一个id为hello的div3.3 getCmp方法getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getC
7、mp方 法中只有一个参数，也就是组件的id。 v getCmp方法其实是Ext.ComponentMgr.get方法的简写形 式。 v Ext.onReady(function() var myPanel=new Ext.Panel( id:“myFirstPanel”, title:“旧的标题, renderTo:hello, width:300, height:200 ); Ext.getCmp( myFirstPanel ).setTitle(新的标题); ); v vExt.Element占Ext Core库的篇幅很大，其中方法 就占据了大部份。因此我们将这些方法可分为下面几类：DOM
8、查询或遍历（如query、select、findParent）v CSS（如setStyle、addClass）v DOM操控（如createChild、remove）v 方位、尺寸（如getHeight、getWidth）获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。 Ext.get(elId).next(); 类似的还有: Ext.get(elId).prev();/上一个侧边节点 Ext.get(elId).first();/第一个节点 Ext.get(elId).last();/最后一个节点 Ext.get(elId).parent();/父节点,等等。v 比如要获取
9、页面上所有的p标签,则可以使用:var ps = Ext.select(p);这样你就可以对所要获取的元素进行操了,select()方法返回的是 Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的元素进 行遍历:ps.each(function(el) el.highlight();/高亮 );当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于 CompositeElement对象上,如:ps.highlight();/select方法返回的结果可直接如同Element般地操作 Ext.query和Ext.select的作用同是根据CSS选择符
10、,基本的XPath,HTML属性等 查找出一个或多个元素。区别在于返回类型上。分别是：query方法返回的是JavaScript标准的数组类型；select方法返回的是CompositeElement类型。 v CompositeElement类型属于Ext自定义的类型，简单地说是以一个 Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口， 也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元 素，均被视为一个单独元素处理。v 它的用法和单个的Element对象一样。select方法返回的结果可直接如同 Element般地操作，一
11、般比query方法常用。v Dom Query是Ext Core提供的HTML或XML文档选择器，它支持大部分的CSS 3选择器规则，同时提供了一些自定义方式. Dom Query主要有4种选择方式：元素标记、元素属性、伪对象、CSS值1.通过元素标记选择，主要有以下6种方法：（1）*：选择任何元素。其使用方法请看下面代码。 Ext.select(*); （2）E：元素的标记为E。其使用方法请看下面代码。 Ext.select(div); （3）E F：选择包含在标记E中的标记F。其使用方法请看下面代码。 Ext.select(div a);/将选择div下的a元素 （4）EF：选择包含在标记
12、E中的直接子标记F。其使用方法请看下面代码。 Ext.select(diva);/将选择div下的直接子元素a （5）E+F：选择所有紧接在元素E后的元素F。其使用方法请看下面代码。 Ext.select(div+a);/将选择紧接在div下的元素av 2.通过元素属性选择，主要有以下7种语法。（1）Efoo：选择带有属性foo的元素。其使用语法请看下面代码。 Ext.select(divid);/选择有id属性的div元素 （2）Efoo=bar：选择foo的属性值为bar的元素。其使用语法请看下面代码。 Ext.select(inputchecked=true);/选择checked属性值
13、为true的元素 （3）Efoo=bar：选择foo的属性值以bar开头的元素。其使用语法请看下面 代码。 Ext.select(inputname=form1); /选择name属性值以form1开头的元素 （4）Efoo$=bar：选择foo的属性值以bar结尾的元素。其使用语法请看下面 代码。 Ext.select(inputname$=form1); /选择name属性值以form1结尾的元素 （5）Efoo*=bar：选择foo的属性值包含字符串bar的元素。其使用语法请看 下面代码。 Ext.select(inputname*=form1); /选择name属性值包含字符串form
14、1的元素 （6）Efoo%=2：选择foo的属性值能整除2的元素。其使用语法请看下面代码。3.通过伪对象选择，主要有以下18种语法。 （1）Ext.select(ul li:first-child); /选择所有ul下的第一个li子节点 （2）Ext.select(ul li:last-child); /选择所有ul下的最后一个li子节点 （3）Ext.select(ul li:nth-child(2); /选择所有ul下的第2个li子节点 （4）Ext.select(ul li:nth-child(odd); /选择所有ul下的奇数行li子节点 （5）Ext.select(ul li:nth
15、-child(evan); /选择所有ul下的偶数行li子节点 （6）Ext.select(ul li:only-child); /选择所有ul下只有一个子节点的li节点 （7）Ext.select(input:checked);/选择所有checked属性值为true的元素 （8）Ext.select(input:first); /选择第一个input元素 （9）Ext.select(input:last); /选择最后一个input元素 （10）E:nth(n)：选择匹配的第n（n1）个元素E。其使用语法请看下面代码。 Ext.select(input:nth(2); /选择第2个input元素 （11）E:odd：是语法“:nth-child(odd)”的简写。
