?
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:数据代理,兼容不同的数据库、代理各种数据源,解析中间数据格式
--------------------------------------------------------
?