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 指定所需的类总是更好的。
- requires 属性加载需要的类时，当前类初始化之前被加载。
- uses 属性加载需要的类时，当前类初始化之后被加载。
-
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
}]
});
