EXT.js学习（一）

sencha -sdk /path to SDK/ generate app MyApp /path to project/

application.js

extend 会创建一个新的类，并继承父类的属性和方法，你也可以重写父类的方法。而 override 并不会创建一个新的类，而是修改这个被重写的父类。

注意：例如上面的例子，Test 重写了 grid panel，我在其他类中创建 grid panel 时如果不引用 Test 那么重写仍然是不生效的。只有引用了 Test 重写才会生效 grid panel 才会具有 say 方法。

create 对象

onReady

getClass

如果创建的实例是用 Ext.define 定义的，那么返回这个给定对象的类，否则返回 null：

var button = new Ext.Button(); 
Ext.getClass(button); // returns Ext.Button

getClassName

通过它的引用或实例返回类名称：

Ext.getClassName(Ext.Button); //returns "Ext.Button"

Ext.Base

这是所有 Ext 类的基础。所有的 Ext 类都继承自 Ext.Base。该类所有的原型和静态成员都会传递给继承它的类。

Ext.Loader

用于动态的加载依赖。通常使用 Ext.require 来指定依赖。当你定义一个类时，这样指定组件的依赖列表是一个很好的做法，如以下代码所示：

Ext.require(['widget.window', 'layout.border','Ext.data.Connection']);

如果你需要引入一个指定命名空间下所有的 组件/类 时，使用通配符，如以下代码所示：

Ext.require(['widget.*', 'layout.*', 'Ext.data.*');

使用以下语法排除掉不需要的类：

Ext.exclude('Ext.data.*').require('*');

用这种方式，依赖的类是异步加载的。如果在你定义的类中没有指定依赖的类，那么当使用 Ext.Create 创建实例时，如果它是未加载的，这时将会同步加载这些类文件。这对性能有一定的影响，所以当你定义类时，使用 Ext.require 指定所需的类总是更好的。

1. requires 属性加载需要的类时，当前类初始化之前被加载。
2. uses 属性加载需要的类时，当前类初始化之后被加载。
3. singleton:true 属性当前类初始化时,该实例是一个单例对象。

注意：定位类的文件路径是基于类名的。例如：MyApp.view.About 类的路径应该是 \myapp\view\ about.js

Adding listeners(为类添加监听)

当你创建对象或者创建以后都可以为这个对象添加监听器。下列示例代码为这个对象添加了一个 单击事件 的监听：

Ext.create('Ext.Button', {   
    renderTo: Ext.getBody(),   
    listeners: {     
        mouseout: function() {
            //Do something
        },     
        click: function() {       
            // Do something
        }   
    } 
});

你也可以在对象创建之后，使用 on 方法为对象添加事件监听：

var button = Ext.create('Ext.Button');
button.on('click', function() {
   //Do something
}) ;

Removing listeners (删除事件监听)

var HandleClick= function() {
    Ext.Msg.alert('My button clicked!');
}
 
Ext.create('Ext.Button', {   
    listeners: {
       click: HandleClick
    } 
}) ; 
 
button.un('click', HandleClick);

组件

所有的组件都派生自 Ext.Component 类，它提供支持创建，重绘，渲染和处理组件。

一个典型的 Ext JS 应用包含一组嵌套的组件。

Ext.create('Ext.panel.Panel', {   
    renderTo:Ext.getBody(),   
    width:700,
    height:400,
    items:[{     
        xtype: 'panel',     
        title: 'Panel 1',
    },{     
        xtype: 'panel',     
        title: 'Panel 2',     
        height: 200,     
        items: [{
            xtype: 'button',       
            text: 'Click Me'
        }]
    },{     
        xtype: 'panel',     
        title: 'Panel 3',     
        width: 150,     
        height: 100
    }]
});

结构

效果

容器

容器是一个特殊的组件类型，它能够持有其他组件。在 Ext JS 中 Ext.container.Container 类是所有的容器的基础类。

布局

布局定义了包含的组件是如何定位的以及设定组件的尺寸大小。每一个容器都有一个布局。默认布局是 auto 。这将不会为子组件指定任何关于位置和大小的规则。

使用 column 布局和 center 布局。

当你使用 column 布局，你可以指定 columnWidth 。所有的列的 columnWidth 的值的总和必须等于 1 。你也可以为一些列指定固定宽度，如以下代码所示。这里，Panel3 取了一个 150 的固定宽度，然后剩下的两列按照 columnWidth 的值分配剩下的宽度：

Ext.create('Ext.panel.Panel', {   
    renderTo:Ext.getBody(),   
    width:700,   
    height:400,   
    // ！！
    layout:'column',
    items: [{     
        xtype: 'panel',     
        title: 'Panel 1',     
        columnWidth: 0.4,     
        height: 400,
    },{     
        xtype: 'panel',     
        title: 'Panel 2',     
        columnWidth: 0.6,     
        layout: 'center',     
        height: 400,     
        items: [{
            xtype: 'button',       
            text: 'Click Me'
        }]
    },{     
        xtype: 'panel',     
        title: 'Panel 3',     
        width: 150,     
        height: 400
    }]
});

输出为