`

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

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

 

6
1
分享到:
评论

相关推荐

    EXTJS应用EXTJS应用EXTJS应用EXTJS应用

    在EXTJS应用中,`Default.aspx`和`Session.aspx`通常是ASP.NET Web应用程序的入口点,它们是ASP.NET页面,用于处理用户请求和展示内容。`Default.aspx`通常作为默认首页,展示网站的欢迎界面或导航结构。而`Session....

    Extjs应用案例--<酒店管理系统>

    Extjs应用案例: 本酒店管理系统采用三层架构,SQL Server数据库。最主要的是采用了Extjs框架。 酒店系统实现了部分功能。aspx后台页面几乎无代码。业务逻辑处理全部采用Extjs自带的函数。对于学习Extjs的框架的...

    100多个ExtJS应用初学实例集

    100多个ExtJS应用初学实例集,采用最新框架实现。

    Extjs应用教程 提高篇

    在“ExtJS应用教程 提高篇”中,我们看到一系列教程,涵盖了从基础到高级的EXTJS使用技巧,特别是针对EXTJS 2.2版本。教程内容包括了如何使用EXTJS组件,如GridPanel和ComboBox,以及如何动态生成数据。 在提高篇的...

    extjs应用开发指南第2,5章

    《extjs应用开发指南》第2,5章,word文档格式,写的很详细,很清晰,对ext新手有很大帮助

    100多个ExtJS应用初学实例集.zip

    100多个ExtJS应用初学实例集.zip

    extjs应用框架

    在深入探讨ExtJS应用框架之前,我们先了解其核心概念。 1. **整体结构**: ExtJS的应用通常由以下几个主要部分组成: - **CSS样式表**:用于定义组件的外观和布局。 - **JavaScript库**:包括核心库(Core)和...

    struts2 hibernate spring extjs 应用项目

    Struts2、Hibernate、Spring 和 ExtJS 是四个在IT行业中广泛应用的开源框架和技术,它们各自在Web应用程序开发中扮演着重要角色。这个压缩包文件似乎包含了一个整合了这些技术的实际项目,为学习者提供了宝贵的实践...

    extjs小应用

    1. **源代码文件**:这些文件通常以.js扩展名,是EXTJS应用的JavaScript代码,包含了EXTJS组件的定义、布局管理、事件处理等功能。 2. **样式文件**:可能有.css文件,用于定义应用的样式和布局,EXTJS允许自定义...

    ExtJS 应用程序开发

    来源于网络的ExtJS开发资料,希望大家能够喜欢,如您需要请去书城购买!

    extjs多版本整合应用

    多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用多版本整合ExtJs应用。

    ExtJS 7.6 SDK trial

    SDK(Software Development Kit)是ExtJS 7.6的核心组成部分,它包含了开发、调试和部署ExtJS应用所需的所有资源。以下是对ExtJS 7.6 SDK的一些关键知识点的详细解释: 1. **组件库增强**:ExtJS 7.6提供了大量预先...

    extjs6.6项目示例

    Sencha CMD 是一个命令行工具,用于自动化ExtJS应用的构建过程,包括生成项目结构、编译源码、优化资源和打包部署。在"用senchacmd成功发布"的过程中,开发者可以利用它来简化开发流程,提高效率。 "通过改变base-...

    extjs4学习文档

    创建一个名为helloworld.js的JavaScript文件,定义一个EXTJS应用,创建一个容器组件,并在其中放置一个具有标题和内容的Panel。同时,创建一个helloworld.html文件,引入EXTJS的CSS和JavaScript库以及自定义的hello...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    2. **JavaScript文件**:这些是ExtJS应用程序的核心,包含各种组件定义、数据模型、控制器、视图、存储等。初学者可以通过分析这些文件了解ExtJS的应用架构。 3. **CSS文件**:用于定制应用程序的外观和布局。ExtJS...

    包含各种类型的extjs小图标,Extjs4小图标

    - 在ExtJS应用中,可以使用`Icon`配置项在按钮、菜单项或其他组件上添加图标。例如,`{iconCls: 'add'}`将添加一个指定类名的图标,类名对应于CSS中的背景图像,通常存储在CSS文件中。 4. **图标集**: - "5000个...

    extjs 2000个 icon 图标素材

    使用这些图标素材时,开发者可以将它们整合到ExtJS应用中,通过CSS类名引用或者直接设置组件的icon属性。例如,在创建一个按钮时,可以这样做: ```javascript var button = Ext.create('Ext.button.Button', { ...

    extjs-sample:示例 ExtJS 应用程序

    app.js - 主要的 ExtJS 应用程序文件 app 文件夹,其中包含应用程序所需的所有文件 控制器 - 包含应用程序的控制器 模型 - 包含应用程序的模型 视图 - 包含应用程序的主视图(搜索结果网格) store - 包含负责从 ...

    ExtJs应用简单实例

    包里有说明,直接可以运行,相关包齐全。。。。。。。。。。。。。。。。。。

    一个ExtJs4.1.1版本MVC应用框架

    4. app.js:这是应用程序的核心文件,定义了ExtJS应用的配置和初始化过程。在这里,开发者会定义应用程序的启动配置,包括命名空间、启动控制器、加载模型、存储和视图等。例如,可能包含以下代码片段: ```...

Global site tag (gtag.js) - Google Analytics