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:数据代理,兼容不同的数据库、代理各种数据源,解析中间数据格式
--------------------------------------------------------------------------------------------------------------------------------
分享到:
相关推荐
在EXTJS应用中,`Default.aspx`和`Session.aspx`通常是ASP.NET Web应用程序的入口点,它们是ASP.NET页面,用于处理用户请求和展示内容。`Default.aspx`通常作为默认首页,展示网站的欢迎界面或导航结构。而`Session....
Extjs应用案例: 本酒店管理系统采用三层架构,SQL Server数据库。最主要的是采用了Extjs框架。 酒店系统实现了部分功能。aspx后台页面几乎无代码。业务逻辑处理全部采用Extjs自带的函数。对于学习Extjs的框架的...
100多个ExtJS应用初学实例集,采用最新框架实现。
在“ExtJS应用教程 提高篇”中,我们看到一系列教程,涵盖了从基础到高级的EXTJS使用技巧,特别是针对EXTJS 2.2版本。教程内容包括了如何使用EXTJS组件,如GridPanel和ComboBox,以及如何动态生成数据。 在提高篇的...
《extjs应用开发指南》第2,5章,word文档格式,写的很详细,很清晰,对ext新手有很大帮助
100多个ExtJS应用初学实例集.zip
在深入探讨ExtJS应用框架之前,我们先了解其核心概念。 1. **整体结构**: ExtJS的应用通常由以下几个主要部分组成: - **CSS样式表**:用于定义组件的外观和布局。 - **JavaScript库**:包括核心库(Core)和...
Struts2、Hibernate、Spring 和 ExtJS 是四个在IT行业中广泛应用的开源框架和技术,它们各自在Web应用程序开发中扮演着重要角色。这个压缩包文件似乎包含了一个整合了这些技术的实际项目,为学习者提供了宝贵的实践...
1. **源代码文件**:这些文件通常以.js扩展名,是EXTJS应用的JavaScript代码,包含了EXTJS组件的定义、布局管理、事件处理等功能。 2. **样式文件**:可能有.css文件,用于定义应用的样式和布局,EXTJS允许自定义...
来源于网络的ExtJS开发资料,希望大家能够喜欢,如您需要请去书城购买!
多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用。
SDK(Software Development Kit)是ExtJS 7.6的核心组成部分,它包含了开发、调试和部署ExtJS应用所需的所有资源。以下是对ExtJS 7.6 SDK的一些关键知识点的详细解释: 1. **组件库增强**:ExtJS 7.6提供了大量预先...
Sencha CMD 是一个命令行工具,用于自动化ExtJS应用的构建过程,包括生成项目结构、编译源码、优化资源和打包部署。在"用senchacmd成功发布"的过程中,开发者可以利用它来简化开发流程,提高效率。 "通过改变base-...
创建一个名为helloworld.js的JavaScript文件,定义一个EXTJS应用,创建一个容器组件,并在其中放置一个具有标题和内容的Panel。同时,创建一个helloworld.html文件,引入EXTJS的CSS和JavaScript库以及自定义的hello...
2. **JavaScript文件**:这些是ExtJS应用程序的核心,包含各种组件定义、数据模型、控制器、视图、存储等。初学者可以通过分析这些文件了解ExtJS的应用架构。 3. **CSS文件**:用于定制应用程序的外观和布局。ExtJS...
- 在ExtJS应用中,可以使用`Icon`配置项在按钮、菜单项或其他组件上添加图标。例如,`{iconCls: 'add'}`将添加一个指定类名的图标,类名对应于CSS中的背景图像,通常存储在CSS文件中。 4. **图标集**: - "5000个...
使用这些图标素材时,开发者可以将它们整合到ExtJS应用中,通过CSS类名引用或者直接设置组件的icon属性。例如,在创建一个按钮时,可以这样做: ```javascript var button = Ext.create('Ext.button.Button', { ...
app.js - 主要的 ExtJS 应用程序文件 app 文件夹,其中包含应用程序所需的所有文件 控制器 - 包含应用程序的控制器 模型 - 包含应用程序的模型 视图 - 包含应用程序的主视图(搜索结果网格) store - 包含负责从 ...
包里有说明,直接可以运行,相关包齐全。。。。。。。。。。。。。。。。。。
4. app.js:这是应用程序的核心文件,定义了ExtJS应用的配置和初始化过程。在这里,开发者会定义应用程序的启动配置,包括命名空间、启动控制器、加载模型、存储和视图等。例如,可能包含以下代码片段: ```...