1、
Ext.onReady(function(){ }); The function to be executed after loading the "extJS framework".
2、
Ext.Loader.setPath('Ext.ux', '../ux/');
//Dynamic reference to all Js file classes in the "../ux/" directory, mapped to the corresponding namespace
3、
Ext.require dynamically loads classes
// load a single class
Ext.require('Ext.window.Window');
// load multiple
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util. *',
'Ext.grid.PagingScroller'
]);
//Load all classes except "Ext.data.*"
Ext.exclude('Ext.data.*').require('*');
4、
Ext.define to customize a class
Define a Person class, first look at the specific code:
Ext.define("Person", { Name: '', Age: 0, Say: function (msg) { Ext.Msg.alert(this.Name + " Says:", msg); }, constructor: function (name, age) { this.Name = name; this.Age = age; } });
5、
Inheritance of extend classes
ExtJS allows to extend existing classes, and its extension can be achieved through inheritance. Next, we will inherit the Person class just defined by ExtJS, and define a Developer class, which inherits from Person and also has a Coding method. The code is as follows:
Ext.define("Developer", { extend: 'Person', Coding: function (code) { Ext.Msg.alert(this.Name + " 正在编码", code); },
constructor: function(){ this.callParent(arguments); } });
constructor 指明作为它的构造函数
6、
Ext.create 创建组件对象,实例化类
一个例子，我们在ExtJS中定义一个Window对象，代码如下：
var win = Ext.create("Ext.window.Window", { title: '示例窗口, width: 300, height: 200 }); win.show();
7、
Ext.apply 可以简单的理解成把第三个参数（如果有的话）及第二个参数中的属性拷贝给第一个参数对象
超时设定
9、
动态引用加载
ExtJs有庞大的类型库，很多类可能在当前的页面根本不会用到，我们可以引入动态加载的概念来即用即取。这些代码都要写在Ext.onReady外面。
1.动态引用外部Js
//加载配置可用
Ext.Loader.setConfig({ enabled: true });
//动态引用“../ux/”目录下所有Js文件类，映射到对应命名空间
Ext.Loader.setPath('Ext.ux', '../ux/');
2.动态加载类
//加载单个类
Ext.require('Ext.window.Window');
//加载多个
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.PagingScroller'
]);
//加载所有类，除了“Ext.data.*”之外
Ext.exclude('Ext.data.*').require('*');
作用：悬停提示
初始化QuickTips就是为了使带有data-
qtip属性的html标签能够在鼠标移上去的时候显示其内容
例子如下：
<script type="text/javascript" defer>
Ext.onReady(function(){
Ext.QuickTips.init();
});
</script>
</head>
<body>
<input type = 'button' id ='lwc' value='鼠标放在上面看提示'
ext:qtitle = '提示标题' ext:qtip='提示内容'/>
</body>
</html>
12、
Ext.History.init();
浏览器自定义前行后退功能
13、
Ext.TabPanel
TabPanel继承于Ext.Panel，Ext.TabPanel就是有
选项卡的Panel，可以在选项卡之间切换。它是多个不同内容的容器，任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板，索引从0开始。
14、
Ext.data.TreeStore
树节点组件的数据
15
、Ext.tree.Panel
树节点组件
16、
Ext.form.field.Trigger
当点击下拉图标时自动出现menu菜单
17、
Ext.Viewport
VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。
Ext.create('Ext.Viewport', {
}
18、
Ext.data.JsonStore
从远程JSON数据
19、
Ext.window.Window
Window的作用是在页面中创建一个窗口，这个窗口作为容器，可以在它里面加入grid、form等控件，从而来实现更加复杂的界面逻辑。
20、
ExtJS中的items到底是什么意思
ExtJS的控件组织结果是一个树结构，items可以理解成子节点集合，每一个item就是一个子节点
如:
{
xtype: 'panel',
items: [
{
xtype: 'panel'
} ,
{
xtype: 'panel',
items: [ { xtype: 'panel' } ]
}
]
}
21、
config = config || {}; 的意思
相当于 config?config:{}
22、可变参数config
例子：
constructor : function(config) {
config = config || {};
...
}
其中function中的
config为可变参数，不需要定义。
例2：
1.function getUser(name,age){
2.alert("name: "+name + " age: "+age);
3.}
调用方法：getUser(); // 可以不传参数
getUser("cat"); // 可以只传递一个参数
getUser("cat"，20); // 传两个参数
getUser("cat"，20，2，"dog"); // 传两个以上的参数
23、Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是ComboBox，都是通过它实现数据读取、类型转换
每个store最少需要两个组件的支持，分别是proxy和reader，proxy用于从某个途径读取原始数据，reader用于将原始数据转换成Record实例。 这里我们使用的是Ext.data.MemoryProxy和Ext.data.ArrayReader，将data数组中的数据转换成对应的几个PersonRecord实例，然后放入store中。 store创建完毕之后，执行store.load()实现这个转换过程。 经过转换之后，store里的数据就可以提供给Grid或ComboBox使用了，这就是Ext.data. Store的最基本用法。 Ext.data.Store对数据进行排序Ext.data.Store提供了一系列属性和函数，利用它们对数据进行排序操作。 可以在创建Ext.data.Store时使用sortInfo参数指定排序的字段和排序方式，如下面的代码所示。
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord),
sortInfo: {field: 'name', direction: 'DESC'}
});
24、
Ext.data.Model
Model代表应用程序管理的一些对象。例如，我们可能会为 我们想在系统中建模的现实世界中的一些物体像使用者、产品和汽车等定义一个Model。这些Model在 模型管理器中注册，被Store使用, 而这些Store又被许多 Ext中许多与数据绑定的组件使用.。
Model定义为字段、任意方法和与模型相关的属性的集合。例如:
- Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: [
- {name: 'name', type: 'string'},
- {name: 'age', type: 'int', convert: null},
- {name: 'phone', type: 'string'},
- {name: 'addree', type: 'string'}
- ],
- changeName: function() {
- var oldName = this.get('name'),
- newName = oldName + " 六指琴魔";
- this.set('name', newName);
- }
- });
创建模型User的实例并调用我们定义的任何模型的逻辑:
[javascript] view plain copy
- var user = Ext.create('User', {
- name : '六指琴魔',
- age : 26,
- phone: '13800138000'
- });
- user.changeName();
- user.get('name');