ext入门学习

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的HelloWorld

1：环境准备

（1）到官网上下载最新的版本，目前是ext-3.0-rc1.1

（2）下载后解压后，看看里面的包结构：

adapter：负责将里面提供的第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。

build：压缩后的ext全部源码(里面分类存放)。

docs： API帮助文档。

exmaples：提供使用ExtJs技术做出的小实例。

resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。

package：按包分类的源码

source：无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL）开源的协议。Ext-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的面向对象简介

//相当于Java的package

space("");

//完全使用Ext的创建对象语法太繁琐，还是用我们熟悉的js的语法来写

.Class1=function(){

this.aa = "cc";

this.t1=function(){

this.aa="t1";

};

};

.Class2=function(){

this.t1=function(){

this.aa="cc2 tt2";

};

};

//表示Class2继承Class1，这里面没有采用Ext的extends

.Class2.prototype=new .Class1();

//或者使用这个Ext提供的语法

//Ext.extend(.Class2,.Class1);

//这个是Ext可以给一个对象动态的追加属性和方法

Ext.apply(.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);

Ext.query(*号返回所有的元素);

Ext.query("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.query("*{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元素为其父元素的偶数个数的子元素