ExtJs笔记
Posted YangBin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ExtJs笔记相关的知识，希望对你有一定的参考价值。
1、Ext.onReady(function(){ }); 用来加载“extJS框架”之后要执行的函数。
2、Ext.Loader.setPath(\'Ext.ux\', \'../ux/\');
//动态引用“../ux/”目录下所有Js文件类，映射到对应命名空间
3、Ext.require 动态加载类
//加载单个类
Ext.require(\'Ext.window.Window\');
//加载多个
Ext.require([
\'Ext.grid.*\',
\'Ext.data.*\',
\'Ext.util.*\',
\'Ext.grid.PagingScroller\'
]);
//加载所有类，除了“Ext.data.*”之外
Ext.exclude(\'Ext.data.*\').require(\'*\');
4、Ext.define 自定义某个类
定义一个Person类，首先看一下具体的代码：
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、 extend 类的继承
ExtJS 允许对现有的类进行扩展，其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承，定义一个Developer类，它继承自Person，同时还拥有Coding方法，代码如下：
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\');
以上是关于ExtJs笔记的主要内容，如果未能解决你的问题，请参考以下文章