ExtJs应用

http://yitong.xiaodoutao.com/

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、将其解压放置在务器的一个目录中。

 

使用Spket实现ExtJs的自动提示

1、下载spket.jar文件

2、运行cmd-----(找到spket.jar的目录)在提示符中输入java -jar spket.jar,选择Eclipse plugin,然后浏览你的Eclipse文件夹进行安装

3、打开Eclipse进行设置

A、点击Window--Preferences--Spket--JavaScript Profiles--New(name:ExtJs)--Add Library(ExtJS)--Add File(在source目录下找到ext.jsb文件)(将组件库全部选中)--Default--ok(最后重新启动IDE工具)

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

认识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});

});

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

 

ExtJs初级UI设计进阶

1、Ext.Button组件

说明：该组件代替了submit,reset,button HTML控件

构造参数：

text--按钮上的名称

listeners：这个是在对象初始化之前，就将一系列事件进行定义的手段,在进行组件化编程时特别有用

handler：指定一个函数句柄，在默认事件触发时调用，此时的默认事件为click

属性：text--获得当前按钮上的名称、minWidth：按钮的最小宽度、renderTo：将当前对象所生成的HTML对象存放到指定的对象

方法：setText--设置按钮上的名称

事件：click--当点击按钮时触发

代码举例：

Ext.onReady(function(){

var _button = new Ext.Button({

renderTo:Ext.getBody(),//doucment.body也可以使用

text:"确定",

handler:function(){alert("Hello ExtJs");}

listeners:{

"click":function(){alert("Hello ExtJs");}  //一般使用这个

}

});

_button.on("click",function(){alert("Hello ExtJs");});

});

2、Ext.form.TextField组件

说明：该组件代替了传统的text组件

属性：fieldLabel---文本框的标签名称,注，此处需要定义布局为form才能显示。

--Ext.layout.FormLayout：只有在此布局下才能正确显示文本框的标签名，布局的对象必须是Ext.Container或其子类。

--在应用FormLayout布局时只要在主对象的构造参数中指定layout:"form"即可。

--Ext.getCmp(String _id)：得到id为_id的组件对象。

方法：getValue()---得到当前文本框的值

代码举例：

Ext.onReady(function(){

var _panel = new Ext.Panel({

renderTo:Ext.getBody(),

layout:"form", //指定为form布局

labelWidth:30,

title:"人员信息',

width:300

listeners:{

"render":function(_panel){

_panel.add(new Ext.form.TextField({

id:"txt_name",

fieldLabel:"姓名"

}));

     }

      }

});

new Ext.Button({

text:"确定',

renderTo:Ext.getBody(),

handler:function(){

alert(Ext.getCmp("txt_name").getValue());

}

});

});

3、Ext.Panel组件

说明：从某种意义来讲，改变了网页是通过HTMLtable进行布局的历史

属性：

    title:面板的标签名

    width:指定面板的宽度

    height:指定面板的高度

    frame：把四个角变成圆角

    xtype：在ExtJs的可视化组件部署中有一种xtype机制，通过指定xtyep的值,来告诉容器组件如何初始化包含组件，

例xtype:"textfield",表示使用Ext.form.TextField来进行初始化。(可参考API文档----conponent----xtype)

方法：

    addButton(String/Object_config,Function_handler,Object_scope):添加一个按钮对象到面板中

    add(Ext.Component/Object_component)：添加一个组件到面板中

事件：

     render：将当前对象被正确构造后触发

代码举例：

.contain{width:100%;height:100%;top:0;left:0;}

.center{position:absolute;top:30%;left:43%;text-align:left;}

Ext.onReady(function(){

var _panel = new Ext.Panel({

//renderTo:Ext.getBody(),

frame:true,

labelWidth:30,

title:"人员信息',

width:300

});

_panel.addButton({text:"确定"});

_panel.addButton(new Ext.Button({text:"取消",minwidth:100}));

//_panel.render(Ext.getBody());  

//_panel.render("id"); //将面板放到指定的页面ID上

_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{   //指定窗体居中显示

tag:"div",

cls:"contain",

cn:[{tag:"div",cls:"center"}]

},true).child("div"));

 

 

});

4、Ext.Window继承于Ext.Panel

说明：该组件是实现窗体化开发的基础

构造参数：

title：窗体名称

minimizable:是否显现最小化按钮

maximizable:是否显现最大化按钮

plain:与当前界面着色相同

方法：

show:窗口显现

hide:窗口隐藏

事件：

hide:当隐藏时触发

show:当显示时触发

代码举例：

Ext.onReady(functon(){

var _window = new Ext.Window({

title:"登陆",

frame:true,

width:260,

layout:"form",

labelWidth:45,

plain:true,

resizable:false,//控件窗体不能改变大小

defaults:{xtype:"textfield",width:180},

bodyStyle:"padding:3px",

closeAction:"hide", //点击关闭窗体隐藏

listeners:{

"show":function(){alert("窗体显示");},

"hide":function(){alert("窗体隐藏");}

},

items:[{

   fieldLabel:"账号"

},{

   fieldLabel:"密码"

}],

buttons:[{

text:"确定"

},{

text:"取消",

handler:function(){_window.hide();}  //调用事件

}]

});

_window.show();

});

 

5、Ext.GridPane组件

说明：用于显示数据的控件

Grid的组成：

1、Store：数据记录的模型(行为单位)

A：Record--数据以record(记录)类型的数据进行存储，也可以说store是一个记录集

Ext.onReady(function(){

var store = new Ext.data.Store();

var rs = new Ext.data.Record(["name","sex"]);

rs.set("name","tom");

rs.set("sex","male");

store.add(rs);

alert(store.getCount()); 

alert(store.getAt(0).get("name"));//获取以name的值

});

B：Proxy或Data--代理各种数据源

C：DataReader--通过子类JsonReader -->ArrayReader、xmlReader实现

Ext.onReady(function(){

var sotre = new Ext.data.Store({

data:[["男"],["女"]],

//ArrayReader方式

reader:new Ext.data.ArrayReader({},Ext.data.Record.create(["sex"]))

//data:[{sex:"男"},{sex:"女"}],  //JsonReader方式

//JsonReader方式

//reader:new Ext.data.ArrayReader({},Ext.data.Record.create(["sex"]))

});

alert(store.getCount());

alert(store.getAt(0).get("sex"));

});

2、ColumnModel：列怎么显示

3、View：封装了用户界面

4、selection model：选择行为的模型

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

Store:数据存储器,用来保存与管理数据,通过reader解析proxy提供的数据源里面数据

Reader:数据读取器,用来解析proxy提供的数据源里面数据

proxy:数据代理,兼容不同的数据库、代理各种数据源,解析中间数据格式

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

http://yitong.xiaodoutao.com/