ExtJS培训进阶教程

Extjs入门培训软件就是服务Extjs培训ii目录1什么是ExtJs.............................................................................................................................32ExtJs的使用.............................................................................................................................32.1获取ExtJs.....................................................................................................................32.2应用Extjs.....................................................................................................................32.3演示HelloWorld...........................................................................................................43get,getDOM,getCmp.................................................................................................................43.1getDom方法.................................................................................................................43.2get方法.........................................................................................................................53.3getCmp方法..................................................................................................................54事件...........................................................................................................................................85ExtJs所包含组件.....................................................................................................................95.1ExtJS组件分类............................................................................................................96ExtJs常用组件介绍...............................................................................................................116.1Panel组件...................................................................................................................116.1.1panel示例.......................................................................................................116.1.2panel的布局...................................................................................................126.1.3panel属性简介...............................................................................................146.2ViewPort组件.............................................................................................................156.3表格控件及其内部属性.............................................................................................176.3.1简单的Grid....................................................................................................176.3.2Grid的功能详解............................................................................................196.4按钮.............................................................................................................................277Ext.Ajax.request.................................................................................................................288Ext同步/异步请求................................................................................................................29Extjs入门培训第3页共17页1什么是ExtJsExtJs是可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。ExtJs是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把ExtJs用在.Net、Java、Php等各种开发语言开发的应用中。2ExtJs的使用2.1获取ExtJs获取ExtJs网址：公司使用ExtJs版本为2.02.2应用Extjs应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，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开始的。Extjs入门培训第4页共17页2.3演示HelloWorld3get,getDOM,getCmp要学习及应用好Ext框架，必须需要理解HtmlDOM、ExtElement及Component三者之间的区别。每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句javascript才能完成。因此，Ext在DOM的基础上，创建了ExtElement，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。3.1getDom方法getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。(与getElementById是一个效果)；Ext.onReady(function(){vare=newExt.Element(hello);Ext.getDom(hello);Ext.getDom(e);Ext.getDom(e.dom);});//Html页面中包含一个id为hello的div，代码如下：Extjs入门培训第5页共17页divid=helloaaa/div3.2get方法get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。get方法其实是Ext.Element.get的简写形式。Ext.onReady(function(){vare=newExt.Element(hello);Ext.get(hello));Ext.get(document.getElementById(hello));Ext.get(e);});//Html页面中包含一个id为hello的div3.3getCmp方法getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法中只有一个参数，也就是组件的id。getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。Ext.onReady(function(){varmyPanel=newExt.Panel({id:“myFirstPanel”,title:“旧的标题,renderTo:hello,width:300,height:200});Ext.getCmp(myFirstPanel).setTitle(新的标题);});Ext.Element占ExtCore库的篇幅很大，其中方法就占据了大部份。因此我们将这些方法可分为下面几类：DOM查询或遍历（如query、select、findParent）CSS（如setStyle、addClass）DOM操控（如createChild、remove）方位、尺寸（如getHeight、getWidth）获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。Ext.get('elId').