extjs学习笔记一[EXT框架基础]

转载自 ：http://www.zhuoda.org/lunzi/102660.html

2.1 EXT的事件和类
2.11自定义事件
Ext.onReady(function(){
    Person = function(name) {
        this.name = name;
        this.addEvents("walk", "eat", "sleep");// Person类自定义事件
    }
    Ext.extend(Person, Ext.util.Observable, {
        info: function(event) {
            return this.name + ' is ' + event + 'ing.';
        }
});// Person继承Ext.util.Observable类
//通过on添加事件监听器
var person = new Person('Lingo');
    person.on('walk', function() {
        Ext.Msg.alert('event', person.name + "在走啊走啊。");
        //alert(person.info('walk'));
    });
    person.on('eat', function(breakfast, lunch, supper) {
        Ext.Msg.alert('event', person.name + "要吃" + breakfast + "，" + lunch + "和" + supper + "。");
    });
    person.on('sleep', function(time) {
        Ext.Msg.alert('event', person.name + "从" + time.format("H") + "点开始睡觉啦。");
});
//触发person的事件
    Ext.get('walk').on('click', function() {
        person.fireEvent('walk');//通过调用fireEvent触发事件，传入一个事件名
    });//称作为参数，该事件对应的监听函数就会执行。
    Ext.get('eat').on('click', function() {
        person.fireEvent('eat', '早餐', '中餐', '晚餐');
    });
    Ext.get('sleep').on('click', function() {
        person.fireEvent('sleep', new Date());
    });
});
EXT中遵循一种树状的事件模型，所有继承自Ext.util.Observable类的控件都可以支持事件。可以为这些继承了Ext.util.Observable的对象定义一些事件，然后为这些时间配置监听器。当某个事件被触发时，EXT会自动调用对应的监听器，这这些就是EXT的事件模型。

这里的on是addListener()的简写形式。第一个参数传递事件名称，第二个参数是事件发生时执行的函数。
2.1.2浏览器事件
浏览器事件即传统意义上的鼠标单击、移动等事件，这些事件是由浏览器根据用户的动作触发的，与页面元素紧密相关。Ext使用Ext.EventManager、Ext.EventObject和Ext.lib.Event对原生浏览器事件进行封装，最后展现给我们的是一套统一的跨浏览器的通用事件接口。
Ext.get(‘test’) = document.getElementById(‘test’)

2.1.3 Ext.lib.Event
是定义在adapter中的工具类，它封装了不通浏览器的时间处理函数，为上层组件提供了统一的功能接口。

2.1.4 Ext.util.Observable
在Ext的事件模型体系中有举足轻重的地位，位于组件的顶端，为EXT组件提供了处理事件的最基本功能。如果要实现一个可以处理事件的EXT组件，最直接的方法就是继承Ext.util.Observable。

2.1.5 Ext.EventManager
作为事件管理器，它定义了一系列事件相关的处理函数，其中最常用的当属onDocumentReady(Ext.onReady())、onWinowResize和onTextResize。

2.1.6 Ext.EventObject
是对事件的封装，它将Ext自定义实际和浏览器事件结合在一起使用。

2.2 EXT的核心组件
2.2.1 Ext.Component
是EXT种所以组件的基类，它的所有子类都自动享有了标准EXT组件的生命周期，包括创建、渲染和销毁。它们也自动支持了标准的隐藏/显示以及启用/禁用等操作。
组件大致可以分成3大类：基本组件、工具组件和表单组件。           

2.2.2 Ext.BoxComponent
也是一个比较重要的基础类，它直接继承自Ext.Component,并实现了定位和控制自身大小的功能。如果你需要制作一个可控制大小和位置的组件，就可以直接从Ext.BoxComponent继承。

2.2.3 Ext.container
继承自Ext.BoxComponent,它提供了两个重要的参数：layout和items。Layout参数指定当前组件使用何种布局，items参数中包含的是当前组件中的所有子组件。如果你想制作一个可以对自身包含的子组件进行布局的组件，那么就需要继承Ext.Container,它是一切布局组件的超类。

2.2.4 Ext.panel
Ext.Panel是EXT种经常用到的一个组件，它直接继承自Ext.container。与上面那些组件不通的是，Ext.Panel无需继承就可以直接使用。它是一个相当完美的标准组件。

2.2.5 Ext.TapPanel
是另一个常用的组件，很流行的一种风格。