Extjs 自学1

参考ExtJS实用开发指南

 

配置(这些参数是创建类时构造方法的参数),
属性:该部分定义了对象的成员变量,可以直接通过点号来访问的,通常该部分都是只读的属性
方法:该部分定义了对象的能够被访问的方法。
事件:就是说,在这个对象的listeners里,你可以监听XXXX这个方法
ExtJs的事件监听,除了直接在对象创建时指定listeners外,还可以在对象创建后用on方法来实现动态的添加。

 

 

 

 

 

 

 

 

 

 

1 类库

ExtJS 由一系列的类库组成,一旦页面成功加载了 ExtJS 库后,我们就可以在页面中通
过 javascript 调用 ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成:

底层 API(core):底层api提供了对dom查询操作的封装,事件处理,dom查询器等基础功能。其他控件都是建立在这些api的基础之上。位于源代码目录的core子目录中。

其它控件都是建立在这些底层 api 的基础。

 

控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、
表格、树、窗口、菜单、工具栏、按钮等等,在我们的应用程序中可以直接通过应用这些控
件来实现友好、交互性强的应用程序的 UI。控件位于源代码目录的 widgets 子目录中,包含
如图 所示。

 

 

实用工具 Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化、 JSON
数据解码或反解码、对 Date、Array、发送 Ajax 请求、Cookie 管理、CSS 管理等扩展等功
能,如图所示:

 

 

2 组件:

组件是指可重复使用并且可以和其他对象进行交互的对象。组件(component)是靠类实现的。
控件是能够提供用户界面接口(UI)功能的组件。换句话说就是,控件是具有用户界面功能的组件。
被复用的部分都可以称为组件。控件就是可视化的组件。

组件形成了 Ext 的控件, Ext 组件是由 Component 类定义,每一种组件都有
一个指定的 xtype 属性值,通过该值可以得到一个组件的类型或者是定义一个指定类型的组
件。
ExtJS 中的组件体系由下图所示

 

 

组件分三类:基本组件,工具栏组件,表单及元素组件

 

 

 

 

 

3. 如何使用组件

 

3.1 组件可以直接通过 new 关键子来创建:比如控件一个窗口,使用 new Ext.Window();创建一个表格则使用 new Ext.GridPanel()。

在构造函数中通过传递构造参数来创建组件:组件的构造函数中一般都可以包含一个对象,这个对象包含创建组件所需要的配置属性
及值,组件根据构造函数中的参数属性值来初始化组件。比如下面的例子

var obj={title:"hello",width:300,height:200,html:'Hello,easyjf open source'};
var panel=new Ext.Panel(obj); panel.render("hello");
<div id="hello">&nbsp;</div>

或者省去obj变量,直接这样:

var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
panel.render("hello");

注:render 方法后面的参数表示页面上的 div 元素 id,也可以直接在参数中通过 renderTo 参
数来省略手动谳用 render 方法,只需要在构造函数的参数中添加一个 renderTo 属性即可,
如下:

New Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source
</h1>'});

3.2 对于容器中的子元素组件,都支持延迟加载的方式创建控件,此时可以直接通过在需要
父组件的构造函数中,通过给属性 items 传递数组方式实现构造。如下面的代码:

var panel=new Ext.TabPanel({width:300,height:200,items:[ {title:"面板1",height:30},{title:"面板
2",height:30},{title:"面板3",height:30}]});panel.render("hello");

这里包括三个面板。上面的代码与下面的代码等价:

var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");
前者不但省略掉了 new Ext.Panel 这个构造函数,最重要前者只有在初始化 TabPanel 的
时候,才会创建子面板,而第二种方式则在程序一开始就会创建子面板。也就是说,前者实
现的延迟加载。
4 组件的配置属性
在 ExtJS 中,除了一些特殊的组件或类以外,所有的组件在初始化的时候都可以在构造
函数使用一个包含属性名称及值的对象,该对象中的信息也就是指组件的配置属性。

比如创建一个按钮:
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel( {title:"面板1",height:30}),new
Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]});panel.render("hello");

每一个组件除了继承基类中的配置属性以外,还会根据需要增加自己的配置属性,另外
子类中有的时候还会把父类的一些配置属性的含义及用途重新定 义。学习及使用 ExtJS,
其中最关键的是掌握 ExtJS 中的各个组件的配置属性及具体的含义,由于所有的组件都继承自 Ext.Component,因此在这里我们列出组件基类 Component 中
的配置属性简单介绍

 

 

5 Extjs Extjs Extjs 组件的事件处理

ExtJS 提供了一套强大的事件处理机制,通过这些事件处理机制来响应用户的动作、监
控控件状 态变化、 更新控 件视图 信息、 与服务 器进行 交互等 等。事 件统一 由
Ext.EventManager 对象管理,与浏览器 W3C 标准事件对象 Event 相对 应,Ext 封装了一个
Ext.EventObject 事件对象。支持事件处理的类(或接口)为 Ext.util.Observable,凡是继承该类
的组 件或类都支持往对象中添加事件处理及响应功能。
首先我们来看标准 html 中的事件处理,看下面的 html 代码:

 

Ext.get("btnAlert")得到一个与页面中按钮 btnAlert 关联的 Ext.Element 对象,可以直接调
用该对象上的 addListener 方法来给对象添加事件,同样实现前面的效果。在调用 addListener
方法的代码中,第一个参数表示事件名称,第二个参数表示事件处理器或整个响应函数。
ExtJS 支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,看下面的代码:

 

5.1 addLinster 方法的另外一个简写形式是 on,由于调用了两次 addListener 方法,因此当点
击按钮的时候会弹出两次信息。

在使用 Ext 的事件时,我们一般是直接在控件上事件,每一个控件包含哪些事件 ,
在什么时候触发,触发时传递的参数等,在 ExtJS 项目的文档中 都有较为详细的说明。

5.2 组件的事件监听器可以直接在组件的配置属性中直接声明

 

posted on 2015-09-22 19:30  小豆角  阅读(246)  评论(0编辑  收藏  举报

导航