EXTJS学习笔记

sencha which

set PATH=%PATH%;C:\Sencha\Cmd\6.0.0.92

sencha generate app --ext MyApp ./myapp
将会创建名为 MyApp 的 Ext JS 应用，应用所有的文件都放在
当前目录下名为 myapp 的文件夹。

extjs

1.基本结构:

Ext.define(‘Car’,{
name:null,
constructor:function(name){
if(name){
this.name=name;
}
},
start:function(){
alert(‘Car started’);
}
});

2.继承: extend

Ext.define(‘ElectricCar’,{
extend:‘Car’,
start:function(){
alert(“Electric car started”);
}

})

3.重写:override

Ext.define(‘My.ux.field.Text’,{
override:‘Ext.form.field.Text’,
setValue:function(val){
this.callParent([‘In override’]);
return this;
}
})

4.总结

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

5.单例

singleton:true,

6.创建对象 Ext.create new(不推荐使用)

Ext.create(Class,Options);

var myCar = Ext.create(‘ElectricCar’,{name:‘MyElectricCar’});

7.关闭Ext.Loader

Ext.Loader.setConfig({
enabled:true
});

8.onReady

这个函数在页面加载完成后调用
Ext.onReady(function(){
new Ext.Component({
renderTo:document.body,
html:‘DOM ready!’
});
});

9.别名 alias xtype

alias:‘widget.panel’

你也可以使用 xtype 为这个类给定一个别名。这个 xtype 是非常有用的，当
你以指定 xtype 的方式应用部件时，并不会创建实例，而是在真正调用展示的
时候才会创建这个类的实例。

10.widget(部件)

用别名创建实例
Ext.widget(‘panel’,{}
renderTo:Ext.betBody(),
title:‘panel’
);
等价于Ext.create();

11.getClass

如果创建的实例是用 Ext.define 定义的，那么返回这个给定对象的类，否则
返回 null：
var button = new Ext.Button();
Ext.getClass(button);

12.getClassName

通过它的应用或实例返回类的名称
Ext.getClassName(Ext.Button);

13.Ext.Base

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

14.Ext.class

这是一个低级别的工厂类,用于通过Ext.ClassManager定义一个类.所以不应该在你的代码中直接访问,你应该使用Ext.difine

15.Ext.ClassManager

它管理所有的类同时处理类反射.通常通过下面几个方法访问:
define create widget getClass getClassName

16.Ext.loader

用于动态的加载依赖

Ext.require([‘widget.’, 'layout.’, ‘Ext.data.’);
使用以下语法排除掉不需要的类：
Ext.exclude('Ext.data.’).require(’*’);

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

17.Events(事件)

18.Adding listeners(为类添加监听)

Ext.create(‘Ext.Button’,{
renderTo:Ext.getBody(),
listeners:{
click:function(){
Ext.Msg.alert(‘Button clicked!’);
},
mouseout:function(){
//Do something
}
}
});

19.Removing listeners(删除事件监听)

var HandleClick=function(){
Ext.Msg.alert(“my buttion clicked!”);
}
Ext.create(‘Ext.Button’,{
listeners:{
click:HandleClick
}
});

button.un(‘click’,HandleClick);

20.页面DOM元素的事件处理

var div=Ext.get(‘mydiv’);
div.on(‘click’,function(e,t,e0pts){
//do something
});

21.访问DOM

get query select

Ext.get 根据DOM元素的Id检索获取并封装为Ext.dom.Element对象
var mydiv = Ext.get(‘myDivId’);
Ext.query 基于传入的CSS选择器,从给定的根节点开始查找,返回一个元素数组
var someNodes = Ext.query(’.oddRow’, myCustomComponent.getEl().dom);
Ext.select 给出一些 CSS/XPath 选择器，Ext.select 方法返回一个 CompositeElement类型的对象，代表一个元素的集合。
var rows = Ext.select(‘div,row’);
row rows.setWidth(100);

22.多重选择器

Ext.select(‘div.row, span.title’); //匹配所有的 class 用 .row 的 div
元素，和匹配所有 class 用 .title 的 span 元素

当你使用 select ，它默认取 HTML body 作为根并从默认的 body 开始检索整
个 DOM 树。你可以通过制定一个根元素来避免这种情况，这样它将只搜索给定
的根的子节点。
Ext.get(‘myEl’).select(‘div.row’);

23.链式选择器

下列的查询方式会匹配 class 为 row 并且 title 属性值为 bar 的 div ，这
个 div 属于其父元素的首个子元素：
Ext.select(‘div.row[title=bar]:first’)

24.Ext.ComponentQuery 可以用ID,xtype和属性查找一个组件

下列查询将返回所有的 xtype 为 button 的组件：
Ext.ComponentQuery.query(‘button’);
得到一个 id 为 foo 的组件，用以下代码：
Ext.ComponentQuery.query(’#foo’);
用嵌套选择器
Ext.ComponentQuery.query(‘formpanel numberfield’); // 这里获取 xtype
为 frompanel 下面的 xtype 为 numberfield 的组件

25.组件

例如 button 和 label,所有的组件都派生自
Ext.Component 类，它提供支持创建，重绘，渲染和处理组件。
所有的组件都有一个属性叫做 xtype 。它是非常有用的，它用在当你不想马上
实例化这个组件时，而是想让这个组件在实际被应用时才创建，就是我们俗称
的懒加载。

26.容器

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

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
}
}]
})

27.absolute 绝对布局

这个布局使用 x 和 y 属性来指定组件的绝对定位：

28.accordion 手风琴(可折叠)布局

这个布局展示了在一个时间里只有一个内置的可支持折叠和展开的子级
panel

29.anchor 锚点布局

这个布局使你能够指定子级组件的大小，而这是相对于布局容器的。首先容器
根据指定的锚点规则调整然后所有的子级组件再作调整：

30.border 布局

这个布局允许你为子组件指定一个区域位置，例如 center，north，south，
west 和 east。当你使用 border 布局时，在其内的组件必须有一个指定区域
为 center，如下列代码所示：

31.card 卡片布局

在此布局中，只有一个子组件是可见的，这个组件基本上充满整个容器。卡片
布局一般应用在向导或者 tabs：

32.center 中心布局

这种布局，容器的子组件在中间。在本章中开始介绍布局的部分，我们已经有
一个例子了。

33.column 列布局

用此布局，你可以将容器划分为指定数量的列并指定每列所占的大小。这个例
子也在本章开始介绍布局的部分中可以找到。

34.fit 适配布局

在此布局中，子组件将会自适应容器的尺寸

35.hbox 布局

这种布局与 column 布局几乎是一样的，但是这种布局允许你拉伸列的高度。
这里使用 flex 选项为子组件设置水平的相对值：

36.table 表格布局

这个布局允许你渲染一个表格出来。你可以指定列数和行数，使用 rowspan 和
colspan 创建复杂布局：

37.VBox 布局

这个布局内，子组件是垂直向下一个接一个排列