Ext入门学习 精品资料

Ext入门学习一：Ext是什么ExtJS是一个javascript框架，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件。 二：Ext能干什么主要是用来制作富客户端的Web应用。包括但不限于：（1）  可以动态创建web组件，动态维护web的Dom对象（2）  灵活地获取界面组件对象，方便对对象的操作和控制（3）  大量的组件对象帮助构建复杂的web应用（4）  友好的Ajax支持（5） | 完善的事件处理机制 三：Ext有什么 四：Ext的HelloWorld1：环境准备（1）到官网上下载最新的版本，目前是ext-3.3-beta（2）下载后解压后，看看里面的包结构：adapter：负责将里面提供的第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。build： 压缩后的ext全部源码(里面分类存放)。 docs： API帮助文档。 exmaples：提供使用ExtJs技术做出的小实例。 resources：ExtUI资源文件目录，如CSS、图片文件都存放在这里面。 package：按包分类的源码source：无压缩Ext全部|的源码(里面分类存放)遵从LesserGNU（LGPL）开源的协议。 

1Ext-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.html    Ext.onReady(function(){      alert("HelloExt3.0，你好");});   五：Ext的面向对象简介//相当于Java的packageExt.namespace("Ext.cc");//完全使用Ext的创建对象语法太繁琐，还是用我们熟悉的js的语法来写Ext.cc.Class1=function(){ |  this.aa="cc";   

2   this.t1=function(){       this.aa="t1";   };};Ext.cc.Class2=function(){   this.t1=function(){       this.aa="cc2tt2";   };};//表示Class2继承Class1，这里面没有采用Ext的extendsExt.cc.Class2.prototype=newExt.cc.Class1();//或者使用这个Ext提供的语法//Ext.extend(Ext.cc.Class2,Ext.cc.Clas|s1);//这个是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(要获取对象的id)Element.get()方法提供内置缓存|（Cache），多次访问同一对象效率上有极大优势；内置常用的DOM节点的动作，并且是跨浏览器的定位的位置、大小、动画、拖放等等（添加/移除CSS类,添加/移除事件处理程序,定位,改变大小,动画,拖放）。  3：获取多个元素——DomQuery（1）元素选择符selector：Ext.query(元素类型名称如：”div”);Ext.query(第一个参数元素类型名称，第二个参数是#元素的id);Ext.query(#元素的id);Ext.query(.元素的class);

3Ext.query(*号返回所有的元素);Ext.query("divinput"|)//获取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*=he