ExtJs应用

ExtJs是一种Ajax的框架

1、基于javaScript语言

2、基于java Swing的MVC架构

3、支持组件化，模块化设计，提供本地数据源的支持，可绑定到控件上。

4、完善与服务端的交互机制。

------------------------------------------------------------------------------------------------------

Ajax的优缺点

1、局部刷新、异步提交。

2、Ajax使用的是javaScript脚本语言写的，使用Ajax会影响浏览器速度。

------------------------------------------------------------------------------------------------------

ExtJs概念

1、组件(component)：能够以图形化形式呈现界面的类，其中还可以分为容器组件与元件组件

A、容器组件：能够包含其它容器组件或者元件组件的类，是进行单元化组件开发的基础。

B、元件组件：能图形化形式表现一个片面功能的组件，如刻度器、日历、树形列表等。

2、类(class)：提供功能的非图形可形的类，按其功能可分为;

A、数据支持类(data)

B、拖放支持类(dd)

C、布局支持类(layout)

D、本地状态存储支持类(state)

E、实用工具类(util)

3、方法(method)：作为类的功能体现，能够产生改变对象本身产生变化的直接因素

4、事件(event)：由类定义的、并且可以在类对象自身状态发生改变的触发，只有被定阅的事件才会有效。

 

5、配置选项(config option)：用以初始化一个EctJs类对象的手段。

 

6、属性(property)：能够在程序运行期间，能够被访问，用以了解当前类对象的状态。

 

7、命名空间(namespace)：能够将编写好的ExtJs类进行有效组织的手段。

------------------------------------------------------------------------------------------------------

ExtJs的环境配置

1、从http://www.extjs.com/products/extjs/dowmload.php下载ExtJs的SDK。

2、将其解压放置在务器的一个目录中。

------------------------------------------------------------------------------------------------------

认识ExtJs SDK中的结构

1、ext-all.js和ext-all-debug.js：ext的全功能版本和调试全功能版本

2、ext-core.js和ext-core-debug.js：ext的基本功能版本和基本功能调试版本，一般用于网站建设与ajax的应用。

3、Adapter目录：为了使用其它优秀Ajax框架为ExtJs提供有力的技术支持，目前提供四种底层支持框架，Ext(ExtJs自主研发)、jquery、prototype、yui。

4、Air：ExtJs对于Adobe公司的富客户端(AIR)技术支持

5、Build：各个组件的部署版本

6、Docs：ExtJs组件API文档

7、Examples：ExtJs自带的示例

8、Source：ExtJs各个组件的源代码

9、Resurces：ExtJs所使用到的资源文件，比如CSS、图形等。

------------------------------------------------------------------------------------------------------

ExtJs程序运行环境

1、CSS文件：是对ExtJs的widget的全面支持资源文件,一般引用resources\css\ext-all.css文件

2、底层支持文件：对整个ExtJs的程序的底层操作例如HTMLDom读写、XMLHTTPRequest的应用等，一般引用adapter\ext\exst-base.js

3、环境文件：包括ExtJs的所有技术,一般引用ext-all.js

------------------------------------------------------------------------------------------------------

ExtJs面向对象程序设计

1、支持命名空间

定义：对于类的组织定义方式。

代码举例：

Ext.namespace("Ext.XXXXXX");

java代码对照

package Ext.XXXXXX;

2、支持类实例属性

定义：对于一个实例的特征描述

代码举例：

Ext.apply(Ext.XXXXX.Person.prototype,{name:"张三",sex:"男"});

var _person = new Exst.XXXXX.Person(); //实例化对象

alert(_person.name);

java代码对照

private String name="张三";

setName(){}......;

getName(){}......;

3、支持类实例方法

定义：一个对象所具有的功能与动作。

代码举例：

print:function(){

alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));

}

java代码对照

public void print(){

system.out.println("姓名：%s,性别：%s",this.name,this.sex);

}

4、支持类静态方法

定义：在一个类级别上共享的方法

代码举例:

Ext.XXXXX.Person.print = function(_name,_sex){

var _person = new Ext.XXXXX.Person();

_person.name = _name;

_person.sex = _sex;

_person.print();

}

java代码对照

Person.print(String name,String sex){

Persion person = new Person();

person.setName(name);

person.setSex(sex);

person.print();

}

5、支持构造方法

定义：在初始化一个对象的同时执行的方法

代码举例：

Ext.XXXXX.Person = function(_cfg){

Ext.apply(this,_cfg);  //this：当前对象

};

Ext.XXXXX.Person.print = function(_name,_sex){

var _person = new Ext.XXXXX.Person({name:_name,sex:_sex});

_person.print();

};

java代码对照

public Person(String name,String sex){

this.name = name;

this.sex = sex;

}

6、支持类继承

定义：对于类的一种扩展形式

代码举例：Student继承Person

Ext.extend(Ext.XXXXX.Student,Ext.XXXXX.Person,{

job:"学生";

});

java代码对照

Class Student extend Person(){

public Student(String name,String sex){

super(name,sex);

this.setJbo("学生");

}

}

7、支持类实例方法重写

定义：子类在继承父类时对其已经存在的方法时行重新定义

代码举例：

Ext.extend(Ext.XXXXX.Teacher,Ext.XXXXX.Person,{

print:function(){

alert(String.format("{0}是一位{1}老师",this.name,this.sex));

}

});

java代码对照

Class Teacher extend Person(){

public Teacher (String name,String sex){

super.print(name,sex);

}

}

8、支持命名空间别名

定义：对于命名空间的别称

代码举例：

Dc = Ext.XXXXX;//别名首字母必须大写

9、支持类别名

定义：对于类的别称

代码举例：

PN= Ext.XXXXX.Person;//别名字母必须都是大写

10、支持事件队列

定义：对于外界影响的反应，在ExtJs还支持事件队列模式，由Ext.util.Observable类支持

代码举例：

Ext.XXXXX.Person = function(){

this.addEvents("namechange","sexchange");

};

Ext.extend(Ext.XXXXX.Person,Ext.util.Observable,{

name:"",

ses:"",

setName:function(_name){

if(this.name != _name){

this.fireEvent("namechange",this,this.name,_name);

this.name = _name

}

},

setSex:function(_sex){if(...).............................}

});

Ext.onReady(function(){

var txt_name = Ext.get("txt_name");

var txt_sex = Ext.get("txt_sex");

_person = new Ext.XXXXX.Person();

_person.on("namechange",function(_person,_old,_new){txt_name.dom.value = _new;});

_person.on("sexchange",function(_person,_old,_new){txt_sex.dom.value=_new});

});

------------------------------------------------------------------------------------------------------