《ExtJS开发框架入门》由会员分享，可在线阅读，更多相关《ExtJS开发框架入门（94页珍藏版）》请在金锄头文库上搜索。
1、Ext JS开发框架入门框架简介、环境搭建、helloWord示例EXT核心组件应用Ext框架EXT框架基础Ext 框架简介怎样搭建EXT运行环境及开发环境 helloWord示例程序 框架简介、环境搭建及HelloWordExt框架简介v什么是ext？ Ext是一个Ajax框架，可以用来开发带有华丽外观的 富客户端应用，使得我们的b/s应用更加具有活力及 生命力，提高用户体验。 Ext是一个用javascript编写，与后台技术无关的前 端ajax框架。因此，可以把Ext用在.Net、Java、 Php等各种开发语言开发的应用中。 Ext最新版本是ext3.2Ext框架简介vExt提供一系列
2、的对象类，这些基本 上都是用于处理WEB页面控件的。vExt的发布包括三个方面的内容： API参考手册、示例程序及开发包 。Ext框架简介vEXT API参考手册Ext框架简介v示例程序Ext示例程序包共包括十二大类近100示例程序 。Ext框架简介v开发包vadapter ：负责将里面提供第三方底层库（包括 Ext自带的底层库）映射为Ext所支持的底层库。 vbuild ：压缩后的ext全部源码(里面分类存放)。 vdocs ： API帮助文档。 vexmaples：提供使用ExtJs技术做出的小实例。 vresources：Ext UI资源文件目录，如CSS、图片 文件都存放在这里面。 v
3、source ：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。 vext-all.js ：压缩后的Ext全部源码。 vext-all-debug.js ：无压缩的Ext全部的源码(用于 调试)。 vext-core.js ：压缩后的Ext的核心组件，包括 sources/core下的所有类。 vext-core-debug.js ：无压缩Ext的核心组件，包括 sources/core下的所有类。Ext框架简介怎样搭建EXT运行环境及开发环境开发环境 把Ext的开发包直接复制到WEB工程的目录下helloWord示例程序v新建HTML文件并在页面中
4、引入ExtJS的样式及 ExtJS库文件 v样式文件为resources/css/ext-all.css v库文件主要包含两个：adapter/ext/ext-base.js及 ext-all.js v其中ext-base.js是框架基础库，ext-all.js是extjs的 核心库。helloWord示例程序vhelloWord在HTML直接嵌入代码实现Ext.onReady(function()Ext.Msg.alert(helloWord,Hello Word!););helloWord示例程序Ext类库简介Ext框架基础及核心简介Ext组件简介Ext入门基础Ext类库简介vExtJS
5、由一系列的类库组成，一旦页面成功加载 了ExtJS 库后，我们就可以在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由 以下几部分组成：v底层API(core) v控件(widgets) v实用工具(Utils)Ext类库简介v底层API(core)：底层API 中提供了对DOM 操作 、查询的封装、事件处理、DOM 查询器等基础 的功能。其它控件都是建立在这些底层api 的基 础上，底层api 位于源代码目录的core 子目录中 ，包括DomHelper.js、Element.js 等文件。Ext类库简介v控件(widgets)：控件是指可以直接在页面中创建 的可视化组
6、件，比如面板、选项板、表格、树、 窗口、菜单、工具栏、按钮等等，在我们的应用 程序中可以直接通过应用这些控件来实现友好、 交互性强的应用程序的UI。控件位于源代码目录 的widgets 子目录中。Ext类库简介v实用工具Utils：Ext 提供了很多的实用工具，可 以方便我们实现如数据内容格式化、JSON数据 解码或反解码、对Date、Array、发送Ajax 请求 、Cookie 管理、CSS 管理等扩展等功能Ext入门基础尺寸 Ext.getDom(“hello“); Ext.getDom(e); Ext.getDom(e.dom); ); v /Html页面中包含一个id为hello的d
7、iv，代码如下： aaa v 在上面的代码中，Ext.getDom(“hello“)、Ext.getDom(e)、 Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点 对象。 Ext中 get、getDom、getCmp的区别Ext入门基础v get方法中只有一个参数，这个参数是混合参数，可以是 DOM节点的id、也可以是一个Element、或者是一个DOM 节点对象等。 v get方法其实是Ext.Element.get的简写形式。 v Ext.onReady(function() var e=new Ext.Element(“hello“); Ext.get(“hello
8、“); Ext.get(document.getElementById(“hello“); Ext.get(e); ); v /Html页面中包含一个id为hello的div，代码如下： aaa v Ext.get(“hello“)、 Ext.get(document.getElementById(“hello“)、Ext.get(e) 等三个方法都可以得到一个与DOM节点hello对应的Ext元 素。Ext中 get、getDom、getCmp的区别Ext入门基础v getCmp方法用来获得一个Ext组件，也就是一个已经在页 面中初始化了的Component或其子类的对象，getCmp方 法
9、中只有一个参数，也就是组件的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 /Html页面中包含一个id为hello的div，代码如下： aaa v 我们使用Ext.getCmp(“myFirs
10、tPanel“).来得到id为 myFirstPanel的组件，并调用其setTitle方法来设置该面板 的标题 Ext中 get、getDom、getCmp的区别vExt.Element占Ext Core库的篇幅很大，其中方法 就占据了大部份。因此我们将这些方法可分为下 面几类：v DOM查询或遍历（如query、select、findParent）v CSS（如setStyle、addClass）v DOM操控（如createChild、remove）v 方位、尺寸（如getHeight、getWidth）Ext入门基础DOM的增删改查DOM查询v 获取下一个侧边节点，跳过文本节点。可选地
11、可送入一个期待的选择符。 v Ext.get(elId).next(); v 类似的还有: v Ext.get(elId).prev();/上一个侧边节点 v Ext.get(elId).first();/第一个节点 v Ext.get(elId).last();/最后一个节点 v Ext.get(elId).parent();/父节点 /等等v 比如要获取页面上所有的p标签,则可以使用: v var ps = Ext.select(p); v 这样你就可以对所要获取的元素进行操作了,select()方法返回的是 Ext.CompositeElement对象,可以通过其中的each()方法对其
12、所包含的元素进 行遍历: v ps.each(function(el) v el.highlight();/高亮 v ); v 当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于 CompositeElement对象上,如: v ps.highlight();/select方法返回的结果可直接如同Element般地操作 v 或是: v Ext.select(p).highlight(); v 当然,select参数还可以更复杂一些,其中可以包括CSS选择符,基本的 XPath,HTML属性等Ext入门基础DOM查询-Ext.query与Ext.selectv Ext.query和E
13、xt.select的作用同是根据CSS选择符,基本的XPath,HTML属性等 查找出一个或多个元素。区别在于返回类型上。 v 分别是：query方法返回的是JavaScript标准的数组类型； v select方法返回的是CompositeElement类型，试比较：v alter(Ext.isArray(Ext.query(a.BigClass); /true v alter(Ext.query(a.BigClass).length);/里面包含的元素个数v Ext.select(a.BigClass).each(function(i) i.dom.href = javescript:vo
14、id(0);/ 找到所有带有BigClass样式的A元素 修改其链接 );v CompositeElement类型属于Ext自定义的类型，简单地说是以一个 Ext.Element实例代表集合中多个元素，可实现Element对象上所有的接口， 也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元 素，均被视为一个单独元素处理。v 它的用法和单个的Element对象一样。select方法返回的结果可直接如同 Element般地操作，一般比query方法常用。Ext入门基础DOM查询- DomQuery详解v DomQuery是Ext Core提供的HTML或XML文
15、档选择器，它支持大部分的CSS 3选择器规则，同时提供了一些自定义方式.v DomQuery主要有4种选择方式：元素标记、元素属性、伪对象、 CSS值v 1.通过元素标记选择，主要有以下6种方法： v （1）*：选择任何元素。其使用方法请看下面代码。 v Ext.select(*); v （2）E：元素的标记为E。其使用方法请看下面代码。 v Ext.select(div); v （3）E F：选择包含在标记E中的标记F。其使用方法请看下面代码。 v Ext.select(div a);/将选择div下的a元素 v （4）EF：选择包含在标记E中的直接子标记F。其使用方法请看下面代码。 v E
16、xt.select(diva);/将选择div下的直接子元素a v （5）E+F：选择所有紧接在元素E后的元素F。其使用方法请看下面代码。 v Ext.select(div+a);/将选择紧接在div下的元素a v （6）EF：选择所有紧接在元素E后的同层元素F。其使用方法请看下面代码 。 v Ext.select(diva);/将选择紧接在div下的同层元素aExt入门基础DOM查询- DomQuery详解v 2.通过元素属性选择，主要有以下7种语法。v （1）Efoo：选择带有属性foo的元素。其使用语法请看下面代码。 v Ext.select(divid);/选择有id属性的div元素 v （2）Efoo=bar：选择f
