extjs 基础部分
创建对象的方法：
使用new 关键字创建对象。
new classname ([config])
使用Ext.create方法创建。
Ext.create(classname,[config])
new Ext.Viewport({})
修改为Ext.create('Ext.Viewport',{})
Ext.widget 或Ext.createWidget 创建对象
使用Ext.ns 或者Ext.namespace 定义命名空间
Ext.ns 是 Ext.namespace 的简写
定义全局变量的语法：Ext.namespace（
namespace1，namespace2，namespace3
）
namespace1 是命名空间的名字。
Ext.namespace（“Myapp”）
使用Ext.define 定义新类。
语法： Ext.define(classname,properties,callback);
classname 定义新的类名。
properties 新类的配置对象，对象里包含了类的属性集对象。
callback:回调函数，当类创建完成后执行该函数。
apply 和applylf 方法
apply 方法中的作用是将所有配置对象的成员复制到对象
数据及其类型检测
typeOf 检测变量的类型
语法：Ext.typeof(v) v是要检测的变量
isEmpty 检测值是否为空
语法： Ext.isEmpty(v,allowEmptyString)
v是要检测的值， allowEmptyString 默认为false,表示不
允许空字符串，反过来，空字符串也返回true; 当返回值为true时表示为空，false表示不为空。
isObject 检测值是否为JavaScript 的对象。
语法： Ext.isObject(v)
islterable 检测值是否可以迭代。
语法： Ext.islterable(v)
isFunction 检测值是否为函数
语法： Ext.isFunction(v)
lterate 对数组或者对象进行迭代。
语法： Ext.iterate(object, fn,scope);
object 是要进行迭代操作的数组或者对象
fn 是要进行迭代操作的函数，
scope 是作用域，f该方法没有返回值。
Clone
可以对克隆数组，对象，DOM 节点和日期等数据，以免保持旧的指向。
语法： Ext.clone(item)
item: 要复制的数组， 对象，DOM 节点或日期，返回克隆后的。
Id
产生id
语法： Exd.id([el,prefix]) 101
getBody
返回当前document 对象的body 元素
语法 Ext.getBody()
getHead
返回docuemnt 对象的head 元素
语法： Ext.getHead()
getDoc
返回document 对象
语法： Ext.getDoc()
Destroy
删除对象及其事件,从DOM 中 删除节点。
语法： Ext.destroy(obj1,obj2,...)
urlAppend
为url 追加查询字符串。
语法：Ext.urlAppend(url,s)
addBehaviors
为匹配选择符的元素绑定事件。
语法：Ext.addBehaviors(o) o为对象。
getScrollBarWidth
获取滚动条宽度
语法： Ext.getScrollBarWidth([force])
force 的作用是强迫重新计算滚动条宽度，该方法返回滚动条的宽度。
destroyMembers
删除对象的成员。
语法：Ext.destroyMembers(o,namel, name2...);
o 是要删除的其成员对象，namel 要删除成员的关键字，该方法没有返回值。
copyTo
从一个对象复制属性名称到另一个对象。
语法： Ext.copyTo(dest,source,name[,useProtoypeKeys]);
平台检测工具 Ext.is
Ext.Function中静态方法：
1.flexSetter
封装一个只接收两个参数的函数，封装后，函数的参数会变的灵活。
语法： Ext.Function.flexSetter(fn);
fn 要封装的函数; 该方法返回封装厚度函数。
2.Bind
绑定函数的方法，主要作用是保持作用域。
语法： Ext.Function.bind(fn[,scope,args,appendArgs]);
Ext.bind(fn[,scope,args,appendArgs]); // 简写
3.Pass
封装一个新函数，在调用旧函数时，将预设的参数插入到新函数的参数前面作为旧函数的参数
该方法主要用于创建回调函数。
语法： Ext.Function.pass(fn,args[,scope])
fn 是要封装的函数： args 是数组，为预设的参数, scope是可选参数，为函数的作用域。
4.Alias
为方法创建一个别名。
语法：Ext.Function.alias(object,methodName);
object 是要创建别名的对象； methodName 是字符串，创建
别名的方法名称,该方法返回要创建别名的函数。
5.createInterceptor
创建一个阻拦函数。
语法：Ext.Function.createInterceptor(origFn,newFn[,scope,returnValue])
6.createDelayed
创建一个延时执行的回调函数。
语法： Ext.Function.createDelayed(fn,delay[,scope,args,appends]);
7.Defer
在指定时间后执行函数。
语法： Ext.Function.defer(fn,defay[,scope,args,appends]);
Ext.defer(fn,defay[,scope,args,appends])
8.createSequence
创建一个函数，在执行原始函数之后执行指定的函数。
语法： Ext.Function.createSequence(origFn,newFn[,scope]);
9.createBuffered
创建一个缓冲函数。
语法： Ext.function.createBuffered(fn,buffer,scopr,args);
10.createThrottled
封装那些被多次且迅速调用的函数。如鼠标移动事件，只有在距离上调用时间达到指定间隔后才会执行操作。
11.Clone
为指定的函数创建一个克隆函数。
语法： Ext.Function.clone(fn);
其中，fn是要克隆的函数。
12.interceptBefore
在函数的原始操作之前执行一个指定的操作。
Ext.Function.interceptBefore(object,methodName,fn[,scope]);
13.interceptAfter
在函数的原始操作之后执行一个指定的操作。
语法: Ext.Function.interceptAfter(object, methodName,fn[,scope]);
Ext.Array 中的静态方法
1.each
枚举数组。
语法： Ext.Arrary.each(array,fn[,scope,reverse]);
Ext.each(array,fn[,scope,reverse]) // 简写
array 是要枚举的数组， fn 是枚举每个项目时要执行的回调函数， 函数可以接受三个参数， item ,index 和items
item 是枚举的数组元素，index 时数组的当前索引。
items 数组本身。 scope 是可选参数， 为函数作用域。
reverse 是可选参数。为布尔值。
2.forEach
遍历一数组，并且使用指定函数处理数组的每一个元素。
语法： Ext.Array.forEach(array,fn[,scope]);
array 是要遍历的数组，fn是处理函数，函数可以接受三个参数， item ,index 和items
item 是遍历的数组元素，index 时数组的当前索引。
items 数组本身。
3.toArray
将可迭代的数据转化为数组。
语法Ext.Array.toArray(iterable[,start,end]);
Ext.toArray(iterable[,start,end]); // 简写
iterable 的数据类型为任何可迭代的数据。表示要转型为数组的数据；
start 是可选参数，为数字值，表示转换的开始位置，end 表示转换 后的结束位置，该方法返回转换后的数组。
4.pluck
根据指定的属性，获取数组内每个队形指定关键字的值。
语法：Ext.Array.pluck(array,name);
Ext.pluck(array,name); // 简写
array 是获取数据的数组， name 是字符串， 未指定的关键字，该方法返回由指定关键字的值所组成的数组。
5. from
将一个值换为数组。
语法： Ext.Array.from(value[,newReference]);
value 是转换为数组的值； newReference 是可选参数，决定使用数组元素是否使用心得 指向。
6.sort
对数组中的元素进行排序。
语法： Ext.Array.sort(array[,fn]);
7.其它数组方法
错误中的静态方法：
1.ignore 布尔值， 默认值为false 显示错误报告。
2.notify 作用与ignore 属性相同。
创建类的类 Ext.Class
所有继承类的基类： Ext.Base
实现动态加载： Ext.Loader
管理类的类： Ext.ClassManager
动态加载的路径设置：
事件及应用
绑定浏览器的时间的过程 Ext.EventManager
要为元素绑定事件，统称会使用Ext.EventManager 的on 方法。
语法： Ext.EventManager.on(el,eventNmae,fn[,scope,opticons]);
封装浏览器事件： Ext.EventObject 180
删除浏览器事件： un(removerListener) removeAll purgeElement
内部事件.
内部事件对象 Ext.util.Event
为组件时间添加接口。 Ext.util.Observable
为组件绑定事件。
特定功能的绑定事件。
延时任务： Ext.util.DelayedTask
一般任务： Ext.util.TaskRunner 与Ext.TaskManager
封装好的单机事件： Ext.util.ClickPepeater
键盘事件
为元素绑定键盘事件。 Ext.util.KeyMap
键盘导航 Ext.util.KeyNav
基本选择符
1.* 任何选择器
语法： Ext.query("*")
2.根据元素标记 E 选择元素
语法： Ext.query("E")
3.选择包含在标记E 中的F
语法： Ext.query("E F")
4. 选择在包含在标记E 中的直接子标记F
语法： Ext.query("E >F")
5.选择在所有紧跟在元素E 后的元素F
语法： Ext.query("E+F")
6.选择在元素E之后的同层的元素 F
语法： Ext.query("E~F")
7.选择id 属性值为ID 的元素。
语法： Ext.query("#ID")
8.选择css 类名为classname 的元素。
语法： Ext.query("E.classname")
属性选择器：
1. 选择带有属性 attribute 的元素
语法：Ext.query("[attribute]")
Ext.query("E[attribute]") // E 为元素标记。
2.选择 attribute 的属性值为value 的元素。
语法：Ext.query("[attribute=vale]")
Ext.query("E[attribute=vale]") // E为元素标记。
3. 选择 attribute 的属性值以 value 开头的元素。
语法： Ext.query("[attribute^=value]")
Ext.query("E[attribute^=value]") // E 为元素标记
4.[attribute$=value]: 选择attribute 的属性值 value 结尾的元素
语法： Ext.query("[attribute$=value]")
Ext.query("E[attribute$=value]")
5.[attribute*=value] 选择 attribute 的属性值包含 value 的元素
语法： Ext.query("[attribute*=value]")
Ext.query("E[attribute*=value]")
6.选择attribute 的属性值能整除 value 的元素
语法： Ext.query("[attribute%= vale]")
Ext.query("E[attribute%= vale]")
7.[attribute!=value] 选择 attribute 的属性值不等于 value 的元素。
语法： Ext.query("[attribute != vale]")
Ext.query("E[attribute != vale]")
css 属性值选择符
伪选择器
1. first-child
且其父节点的第一个子节点。
语法： Ext.query("E: first-child")
2. last-child
3.nth-child(n)
4.nth-child(odd)
5.nth-child(even)
6.only-child
7.checked
8.first
9.last
10.nth(n)
11.contains
12.nodeValue
13.not
14.has
15.next
16.prev
17.any(S1 | S2)
扩展选择器
使用Ext.get 获取元素
语法：var el = Ext.get(id)
数据交互。
Reader 对象的配置项
Reader 对象的配置决定了如何从返回的数据中返回的数据中提取数据。
1.idProperty 字符串，指定那份字段为每个记录的唯一标识字段。
2.totalProperty 从返回数据获取数据库记录总数的属性名称，默认为total。
3.successProperty
4.root
5.messageProperty
6.implicitIncludes
数据模型
数据模型的骨架子——字段 Ext.data.Field
数据集
数据验证及错误处理
模型的关系
管理数据模型
定义数据模型
数据模型的定义过程
数据模型的创建
数据模型的配置项，属性和方法。
Store
定义类：
定义一个stadent 的类； 在MyApp.student 命名空间。
Ext.defne("MyApp.student.Student",{
name: "tom",
sex: "box",
// 添加构造函数
constructor: function(name,sex){
if(name) {
this.name= name
}
if(sex){
this.sex= sex
}
}
showInfo:function(){
alert("hello"+this.name+"sex"+this.sex)
}
})
调用类
// 开启动态加载
Ext.Loader.setConfig({enabled:true});
// 动态加载 My.App 命名空间 MyApp 目录
Ext.Loader.setPath("My.App","MyApp")
// 动态加载类。
Ext.require('MyApp.student.Student')
Ext.onReady(function(){
var student = Ext.create("MyApp.student.Student","lisi","girl");
student.showInfo();
})
加载多个类
Ext.require({ 'Ext.grid.*', 'Ext.data.*' 'Ext.util.*', 'Ext.grid.PaginScroller' })
// 加载所有类 ，除了 Ext.data.* 所有类。
Ext.exclude('Ext.data.*').require("*");
基本数据类型
字符串类型，日期型，布尔等基本数据类类型。
// 定义一个日期类型的数据。
var datel = new Date("2011-11-12"); var date = new Date(2011,11,12,12,1,12);
// 转化为 字符串类型
alert(date.toLocaleDateString());
// 转化为数值类型
alert(Number(data))
// 转化为 布尔 假
var myFalse = new Boolean(false);
// 定义数值
var num = new Number(45.6) alert(num)
函数执行时间控制
主要有两个方面 1.让某个函数等待一段时间后自执行吗，
某个函数按这一定的频率反复执行。
1.等待函数执行，页面加载完毕等带 3秒后弹出提示。
Eet.onReady(function(){ var funcl = function(name1,name2){ Ext.Msg.alert("hello,"+name1+"+name2") } Ext.defer(funcl,3000,this,["zhangsan","lisi"]); })
2.让mydiv 每个1秒 更新一次
Ext.onReady(function() { var i= 0； var task = { run : function() { Ext.fly('mydiv').update(new Date().toLocaleTimeString()); if(i > 10) Ext.TaskManager.stop(task); i++; }, interval: 1000 } Ext.TaskManager.start(task); })
页面上 <div id="mydiv"></div>
键盘事件监听
1.Ext.KeyMap 简历键盘和用户动作之间的映射。
Ext.getDoc 当前的document 集合
Ext.onReady(function() { var f = function () { alert("B 被按下") } var map = new Ext.KeyMap(Ext.getDoc(), [ { key: Ext.EventObject.B, fn: f }, { key: "bc", fn: function() { alert（ alert('b c 其中一个被按下')） } }， { key: "x", ctrl: true, shift: true, alt: true fn: function () { alert('Control + shift + alt + x组合按下');}, stopEvent: true },{ key:'a', ctrl: true fn:function () { alert('Control + A 全选事件被组织，自定义执行事件。') }， stopEvent: true } ]) }）
Ext.KeyNav
Ext.keyNav 主要是用来绑定方向建的
var div1 = Ext.get("div1); var nav = new Ext.KeyNav(Ext.getDoc(),{ “left”: function (e) { div1.setXY([div1.getX() -1, div1.getY()]); }, “right”: function (e) { div1.setXY([div1.getX() -1, div1.getY()]); }, “up”: function (e) { div1.move("up",1); }, “down”: function (e) { div1.moveTo([div1.getX() -1, div1.getY() + 1]); }, "enter":function (e) {} })
新的类库
Ext.define(className, members, onClassCreated)
className 要声明的类的名字
members 一个对象，包含类成员
onClassCreated 一个可选的回调函数，类创建好了之后，这个函数会被调用
例子：
Ext.define('My.sample.Person', {
name: 'Unknown',
constructor: function(name) {
if(name) {
this.name = name
}
},
eat: function(foodType) {
alert(this.name + " this eating " + foodType)
}
})
var aaron = Ext.create('My.sample.Person', 'Aaron')
aaron.eat("Salad")
继承
Ext.namespace("MyApp");
MyApp.MyWindow = Ext.extend(Ext.window,{
title: "Welcome!",
initComponent: function() {
Ext.apply(this,{
items: [{
xtype: "textfield",
name: "tfName"，
fieldLabel: Enter your name“
}]
})
MyApp.MyWindow.superclass.inotComponent.apply(this,argumemts)
}
});
var win = new MyApp.Mywindow();
win.show();
Ext.define("MyApp.MyWindow",{
// 继承window
extend: "Ext.window",
title: "Wecome",
initComponent: function() {
this.items = [{
xtype: "textfild",
name: "tfName",
fieldLabel: "Enter your name"
}];
// 把子类的全部传递过去。
this.callParent(arguments)
}
})
// 使用这个类
var win = Ext.create("MyApp.MyWindow");
// 显示出来
win.show()
(initComponent 初始化部件方法)
子类从父类继承
Ext.define("Parent",{
constructor: function(name){
this.name = name;
}
});
Ext.define("Child",{
extend: "Parent",
constructor:function(name, sex){
this.sex = sex;
this.callParent([name]);
}
});
var c = new Child("John Huang", "male")
或者 ： var c = Ext.create("Child", "John Huang", "male") // 建议使用实
例化对象
console.log(c.name)
console.log(c.sex)
建议使用Ext.create 实例化
Ext.onReady(function(){ Ext.define("MyApp.Parent",{ constructor: function(name){ this.name = name; } }); Ext.define("MyApp.Child",{ extend: "MyApp.Parent", constructor:function(name, sex){ this.sex = sex; this.callParent([name]); } }); var c = Ext.create("MyApp.Child", "John Huang", "male"); console.log(c.name) console.log(c.sex) })
Configuration 配置 （实例成员）
配置属性 config, 自动创建 setters 和 getters
基本使用方法：
Ext.define("MyClass.A",{
config: {
name: "tom",
set: "mate"
age: 18
},
show: function() {
alert(this.config.name)}
});
var objA = Ext.create("MyClass.A");
objA.show();
objA.setName("John");
objA.show();
alert(objA.getName())
Ext.onReady(function(){
Ext.define("MyClass.A",{
config: {
name: "tom",
set: "mate"
},
show: function() {
alert(this.config.name);
alert(this.config.set)
}
});
var objA = Ext.create("MyClass.A");
objA.show();
var name = a.getName();
alert(name);
objA.setName("John");
alert(objA.getName());
objA.setAge(11);
alert(a.getAge());
})
config 属性将为其属性自动添加 setter 和 getter 函数。
如果想修改 setter 的行为，可以重写 apply 属性方法， 该方法为setter 的内部实现
具体代码如下
Ext.define ("MyClass.A",{
config: {
name: "John Huang",
sex:"male"
},
applyName: function(val){
this.name = "dev" + val;
},
show: function() {
console.log(this.name)
}
})
var a = Ext.create("MyClass.A");
a.setName("John");
console.show(); // 控制台结果： dev: John
show: function() {
alert(this.config.name);
alert(this.config.set)
}
});
var objA = Ext.create("MyClass.A"); objA.show(); var name = a.getName(); alert(name); objA.setName("John"); alert(objA.getName()); objA.setAge(11); alert(a.getAge()); })
Ext.define("MyClass.A", {
conifg: {
name: "John Huamg",
sex: "male"
},
applyName: function(val) {
this.name = "dev" + val;
},
show: function() {
console.log(this.name);
}
})
Ext.onReady(function(){ var a = Ext.create("MyClass.A"); a.setName("John"); a.show(); // 控制台结果为 dev: john })
Ext.onReady(function(){ var a = Ext.create("MyClass.A"); console.log(a.config.name); // john Huang console.log(a.name); // undefined console.log(a.getName); // dev: John Huang console.log(a.name); // dev: John Huang console.log(a.config.name); // John Huang })
getName 内部实现首次调用和第n 此调用时不同的
首次调用时 getName 方法时内部实现步骤如下 ：
1. 检测对象是否有name 属性，有则执行步骤2 ，无责执行步骤3，
2.返回name 属性，并跟新内部实现。
3.以config.name 为参数执行 applyName 函数，因为applyName
函数具体无 this.name = ...., 就会添加 name 属性到对象中，
然后更新内部实现（若 applyName 函数 体无 this.name=...
的语句，那么getName 方法内部如下：
function() { retrun this [q];},直接返回对象的属性。）
setter 和 getter 是将 config 的成员属性复制当前类的成员属性，
然后对成员属性进后续操作。
因此我在重写 applyName 时候要注意遵守原则
不要修改 config 的成员属性值
而在类内部成员函数中访问config 的成员属性如下
Ext.define("MyClass.A",function() {
config: {
name: "John Huang",
sex: "male"
},
showName: function() {
var name = this.name ||
ｔｈｉｓ．ｃｏｎｆｉｇ．ｎａｍｅ；
｝，
ｕｐｄａｔｅNａｍｅ：ｆｕｎｃｔｉｏｎ（ｖａｌ）｛
ｔｈｉｓ．ｎａｍｅ ＝ ｖａｌ
｝
})
组合属性：
可用于实现多继承，该属性可以同步方式加载类文件，并实例化类。
基本用法：
Ext.define("MyClass.A",{
showA: function() {
console.log("A")
}
});
Ext.define("MyClass.B", {
showB: function() {
consle.log("B")
}
})
Ext.define("MyClass.C",{
mixins: {
classA: "MyClass.A",
classB: "MyClass.B"
},
showC: function() {
console.log("C")
}
})
var objC = Ext.create("MyClass.C");
objC.showA(); // A
objC.showB(); // B
objC.showC(); // C
方法同名时
多个mixins 类拥有同名函数
Ext.define("MyClass.A",{
show: function() {
console.log("A")
}
});
Ext.define("MyClass.B",{
show: function() {
console.log("B")
}
});
Ext.define("MyClass.C",{
mixins: {
classA: "MyClass.A",
ClassB: "MyClass.B"
}
});
var objC = Ext.create("MyClass.C");
objC.show(); // A
mixins 中后者的方法无法覆盖前者的同名方法。
方法的调用遵循最近优先原则，优先级别顺序从高到底——当前类，
父类， mixins 类
当前类引用mixins 类成员。
Ext.define("MyClass",{
show: function() {
console.log("A")
}
});
Ext.define("MyClass.c",{
mixins: {
dassA: "MyClass.A"
},
alert: function() {
this.mixins.classA.show();
}
})
var ObjC = Ext.create("MyClass.C");
objC.alert(); // A
类的静态成员属性(statics)
可以通过Ext.Class.statics 属性来设置类的静态成员。
Ext.define("A",{
statics: {
count: 0,
appName: "A"
},
constructor: function() {
return this.statics().count;
},
getCount: function() {
return this.statics().count;
},
getAppName: function () {
return this.self.appName;
}
})
var a = Ext.create("A");
a.getCount(); // 1
a.getAppName(); // A
A.count; // 1
A.appName; A
定义内部不能使用this.statics,成员名 的方式访问静态成员，而是要使用this.self
静态成员名， 或 this.statics(), 静态成员名。
类定义外部使用“类名静态成员”，来访问静态成员。
MVC
Ext.application({ requires: ['Ext.container.Viewport'], name: 'FWY' // 全局的名字 一般根据项目 appFolder : 'app', ／／ 动态加载ｊｓ文件夹 lauch: function() { Ext.create('Ext.container.Viewport',{ layout: "fit", item: [{ xtype: 'panel', title: "标题"， html:"内容" }] }) }})
controller model store view
controller 作为连接model store 和 view 的桥梁， 在mvc 开发模式中
起了至关重要的作用。如果说model 定义了数据模式， store 提供了数据
读取的方法， view 用来展示数据，那么controller 将用来控制具体的
数据操作。
Application.js 文件
1.name : 应用程序名称 自定义的
2.appFolder 应用程序的目录，用来进行动态加载代码的。
3.controllers 应用程序使用到的控制器。
4.autoCreateViewport 是否自动创建 Viewport,默认为flase ，设置为 true
应用程序自动创建Viewport ，这个Viewport 的定义在我的们的app/
view/viewport.js 中；如果为false 的时候，我要在launch 中收到创建应用视图。
Viewport.js 的定义
Viewport 作为我们应用程序的视图模板，可以被单个定义在Viewport.js 文件中
它定义的很简单，通常用来将一个或者多个view 作为它的子控件。
store 作为数据仓库， store 起到了数据存取的作用， grid, form 等
展现的数据是通过store 来提供的
controller 层
alias: 'widget.创建别名
initComonent: function () {
}'
demo 下载 https://github.com/ningmengxs/Extjs.git
