extjs 基础部分
創(chuàng)建對象的方法：
使用new 關(guān)鍵字創(chuàng)建對象。
new ?classname ([config])
使用Ext.create方法創(chuàng)建。
Ext.create(classname,[config])
new Ext.Viewport({})
修改為Ext.create('Ext.Viewport',{})
?
Ext.widget 或Ext.createWidget 創(chuàng)建對象
使用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:回調(diào)函數(shù)，當(dāng)類創(chuàng)建完成后執(zhí)行該函數(shù)。
?
apply 和applylf 方法
apply 方法中的作用是將所有配置對象的成員復(fù)制到對象
數(shù)據(jù)及其類型檢測
typeOf 檢測變量的類型
語法：Ext.typeof(v) ?v是要檢測的變量
isEmpty ?檢測值是否為空
語法： Ext.isEmpty(v,allowEmptyString)
v是要檢測的值， ?allowEmptyString ?默認(rèn)為false,表示不
允許空字符串，反過來，空字符串也返回true; 當(dāng)返回值為true時(shí)表示為空，false表示不為空。
isObject 檢測值是否為JavaScript 的對象。
語法： Ext.isObject(v)
islterable 檢測值是否可以迭代。
語法： Ext.islterable(v)
isFunction 檢測值是否為函數(shù)
語法： Ext.isFunction(v)
lterate ??對數(shù)組或者對象進(jìn)行迭代。
語法： Ext.iterate(object, fn,scope);
object 是要進(jìn)行迭代操作的數(shù)組或者對象
fn 是要進(jìn)行迭代操作的函數(shù)，
scope 是作用域，f該方法沒有返回值。
Clone
可以對克隆數(shù)組，對象，DOM 節(jié)點(diǎn)和日期等數(shù)據(jù)，以免保持舊的指向。
語法： Ext.clone(item)
item: 要復(fù)制的數(shù)組， 對象，DOM 節(jié)點(diǎn)或日期，返回克隆后的。
Id
產(chǎn)生id
語法： Exd.id([el,prefix]) 101
getBody
返回當(dāng)前document 對象的body 元素
語法 Ext.getBody()
getHead
返回docuemnt 對象的head 元素
語法： Ext.getHead()
getDoc
返回document 對象
語法： Ext.getDoc()
Destroy
刪除對象及其事件,從DOM 中 刪除節(jié)點(diǎn)。
語法： Ext.destroy(obj1,obj2,...)
urlAppend
為url 追加查詢字符串。
語法：Ext.urlAppend(url,s)
addBehaviors
為匹配選擇符的元素綁定事件。
語法：Ext.addBehaviors(o) ???o為對象。
getScrollBarWidth
獲取滾動(dòng)條寬度
語法： Ext.getScrollBarWidth([force])
force 的作用是強(qiáng)迫重新計(jì)算滾動(dòng)條寬度，該方法返回滾動(dòng)條的寬度。
destroyMembers
刪除對象的成員。
語法：Ext.destroyMembers(o,namel, name2...);
o 是要?jiǎng)h除的其成員對象，namel 要?jiǎng)h除成員的關(guān)鍵字，該方法沒有返回值。
copyTo
從一個(gè)對象復(fù)制屬性名稱到另一個(gè)對象。
語法： Ext.copyTo(dest,source,name[,useProtoypeKeys]);
平臺(tái)檢測工具 Ext.is
Ext.Function中靜態(tài)方法：
1.flexSetter
封裝一個(gè)只接收兩個(gè)參數(shù)的函數(shù)，封裝后，函數(shù)的參數(shù)會(huì)變的靈活。
語法： Ext.Function.flexSetter(fn);
fn 要封裝的函數(shù); 該方法返回封裝厚度函數(shù)。
2.Bind
綁定函數(shù)的方法，主要作用是保持作用域。
語法： Ext.Function.bind(fn[,scope,args,appendArgs]);
???? Ext.bind(fn[,scope,args,appendArgs]); ?// 簡寫
3.Pass
封裝一個(gè)新函數(shù)，在調(diào)用舊函數(shù)時(shí)，將預(yù)設(shè)的參數(shù)插入到新函數(shù)的參數(shù)前面作為舊函數(shù)的參數(shù)
該方法主要用于創(chuàng)建回調(diào)函數(shù)。
語法： Ext.Function.pass(fn,args[,scope])
fn 是要封裝的函數(shù)： args 是數(shù)組，為預(yù)設(shè)的參數(shù), scope是可選參數(shù)，為函數(shù)的作用域。
4.Alias
為方法創(chuàng)建一個(gè)別名。
語法：Ext.Function.alias(object,methodName);
object 是要?jiǎng)?chuàng)建別名的對象； methodName 是字符串，創(chuàng)建
別名的方法名稱,該方法返回要?jiǎng)?chuàng)建別名的函數(shù)。
5.createInterceptor
創(chuàng)建一個(gè)阻攔函數(shù)。
語法：Ext.Function.createInterceptor(origFn,newFn[,scope,returnValue])
6.createDelayed
創(chuàng)建一個(gè)延時(shí)執(zhí)行的回調(diào)函數(shù)。
語法： Ext.Function.createDelayed(fn,delay[,scope,args,appends]);
7.Defer
在指定時(shí)間后執(zhí)行函數(shù)。
語法： Ext.Function.defer(fn,defay[,scope,args,appends]);
? Ext.defer(fn,defay[,scope,args,appends])
8.createSequence
創(chuàng)建一個(gè)函數(shù)，在執(zhí)行原始函數(shù)之后執(zhí)行指定的函數(shù)。
語法： Ext.Function.createSequence(origFn,newFn[,scope]);
9.createBuffered
創(chuàng)建一個(gè)緩沖函數(shù)。
語法： Ext.function.createBuffered(fn,buffer,scopr,args);
10.createThrottled
封裝那些被多次且迅速調(diào)用的函數(shù)。如鼠標(biāo)移動(dòng)事件，只有在距離上調(diào)用時(shí)間達(dá)到指定間隔后才會(huì)執(zhí)行操作。
11.Clone
為指定的函數(shù)創(chuàng)建一個(gè)克隆函數(shù)。
語法： Ext.Function.clone(fn);
其中，fn是要克隆的函數(shù)。
12.interceptBefore
在函數(shù)的原始操作之前執(zhí)行一個(gè)指定的操作。
Ext.Function.interceptBefore(object,methodName,fn[,scope]);
13.interceptAfter
在函數(shù)的原始操作之后執(zhí)行一個(gè)指定的操作。
語法: Ext.Function.interceptAfter(object, methodName,fn[,scope]);
Ext.Array 中的靜態(tài)方法
1.each
枚舉數(shù)組。
語法： Ext.Arrary.each(array,fn[,scope,reverse]);
???? Ext.each(array,fn[,scope,reverse]) ?// 簡寫
array 是要枚舉的數(shù)組， fn 是枚舉每個(gè)項(xiàng)目時(shí)要執(zhí)行的回調(diào)函數(shù)， ?函數(shù)可以接受三個(gè)參數(shù)， item ,index 和items
? ?item 是枚舉的數(shù)組元素，index 時(shí)數(shù)組的當(dāng)前索引。
items ?數(shù)組本身。 scope 是可選參數(shù)， 為函數(shù)作用域。
reverse 是可選參數(shù)。為布爾值。
2.forEach
遍歷一數(shù)組，并且使用指定函數(shù)處理數(shù)組的每一個(gè)元素。
語法： Ext.Array.forEach(array,fn[,scope]);
array 是要遍歷的數(shù)組，fn是處理函數(shù)，函數(shù)可以接受三個(gè)參數(shù)， item ,index 和items
??item 是遍歷的數(shù)組元素，index 時(shí)數(shù)組的當(dāng)前索引。
items ?數(shù)組本身。
3.toArray
將可迭代的數(shù)據(jù)轉(zhuǎn)化為數(shù)組。
語法Ext.Array.toArray(iterable[,start,end]);
Ext.toArray(iterable[,start,end]); ?// 簡寫
?? ?iterable 的數(shù)據(jù)類型為任何可迭代的數(shù)據(jù)。表示要轉(zhuǎn)型為數(shù)組的數(shù)據(jù)；
start 是可選參數(shù)，為數(shù)字值，表示轉(zhuǎn)換的開始位置，end 表示轉(zhuǎn)換 后的結(jié)束位置，該方法返回轉(zhuǎn)換后的數(shù)組。
4.pluck
根據(jù)指定的屬性，獲取數(shù)組內(nèi)每個(gè)隊(duì)形指定關(guān)鍵字的值。
語法：Ext.Array.pluck(array,name);
??? Ext.pluck(array,name); // 簡寫
array 是獲取數(shù)據(jù)的數(shù)組， name 是字符串， 未指定的關(guān)鍵字，該方法返回由指定關(guān)鍵字的值所組成的數(shù)組。
5. from
將一個(gè)值換為數(shù)組。
語法： Ext.Array.from(value[,newReference]);
?? value 是轉(zhuǎn)換為數(shù)組的值； newReference 是可選參數(shù)，決定使用數(shù)組元素是否使用心得 指向。
6.sort
對數(shù)組中的元素進(jìn)行排序。
語法： Ext.Array.sort(array[,fn]);
7.其它數(shù)組方法 ? ?
?
錯(cuò)誤中的靜態(tài)方法：
1.ignore ?布爾值， 默認(rèn)值為false 顯示錯(cuò)誤報(bào)告。
2.notify 作用與ignore 屬性相同。
創(chuàng)建類的類 ?Ext.Class ? ?
所有繼承類的基類： Ext.Base
實(shí)現(xiàn)動(dòng)態(tài)加載： Ext.Loader ??
管理類的類： Ext.ClassManager
動(dòng)態(tài)加載的路徑設(shè)置：? ?
事件及應(yīng)用
綁定瀏覽器的時(shí)間的過程 Ext.EventManager
要為元素綁定事件，統(tǒng)稱會(huì)使用Ext.EventManager 的on 方法。
語法： Ext.EventManager.on(el,eventNmae,fn[,scope,opticons]);
封裝瀏覽器事件： Ext.EventObject ???180
刪除瀏覽器事件： ?un(removerListener) ?removeAll purgeElement
內(nèi)部事件.
內(nèi)部事件對象 Ext.util.Event
為組件時(shí)間添加接口。 ?Ext.util.Observable
為組件綁定事件。
特定功能的綁定事件。
延時(shí)任務(wù)： Ext.util.DelayedTask
一般任務(wù)： Ext.util.TaskRunner 與Ext.TaskManager
封裝好的單機(jī)事件： Ext.util.ClickPepeater
鍵盤事件
為元素綁定鍵盤事件。 Ext.util.KeyMap
鍵盤導(dǎo)航 ??Ext.util.KeyNav
基本選擇符
? 1.* 任何選擇器
? 語法： Ext.query("*")
2.根據(jù)元素標(biāo)記 E ?選擇元素
語法： Ext.query("E")
3.選擇包含在標(biāo)記E 中的F
語法： Ext.query("E F")
4. 選擇在包含在標(biāo)記E 中的直接子標(biāo)記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 為元素標(biāo)記。
2.選擇 attribute ?的屬性值為value 的元素。
語法：Ext.query("[attribute=vale]")
Ext.query("E[attribute=vale]") // E為元素標(biāo)記。
3. 選擇 attribute 的屬性值以 value 開頭的元素。
語法： Ext.query("[attribute^=value]")
???? ?Ext.query("E[attribute^=value]") ?// E 為元素標(biāo)記
4.[attribute$=value]: 選擇attribute 的屬性值 value 結(jié)尾的元素
語法： 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
??? ?且其父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)。
語法： 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)
擴(kuò)展選擇器
使用Ext.get 獲取元素
語法：var el = Ext.get(id)
數(shù)據(jù)交互。
Reader 對象的配置項(xiàng)
Reader 對象的配置決定了如何從返回的數(shù)據(jù)中返回的數(shù)據(jù)中提取數(shù)據(jù)。
1.idProperty 字符串，指定那份字段為每個(gè)記錄的唯一標(biāo)識字段。
2.totalProperty ??從返回?cái)?shù)據(jù)獲取數(shù)據(jù)庫記錄總數(shù)的屬性名稱，默認(rèn)為total。
3.successProperty ??
4.root
5.messageProperty
6.implicitIncludes
數(shù)據(jù)模型
數(shù)據(jù)模型的骨架子——字段 Ext.data.Field
數(shù)據(jù)集
數(shù)據(jù)驗(yàn)證及錯(cuò)誤處理
模型的關(guān)系
管理數(shù)據(jù)模型
定義數(shù)據(jù)模型
數(shù)據(jù)模型的定義過程
數(shù)據(jù)模型的創(chuàng)建
數(shù)據(jù)模型的配置項(xiàng)，屬性和方法。
Store
定義類：
定義一個(gè)stadent 的類； 在MyApp.student 命名空間。
Ext.defne("MyApp.student.Student",{
name: "tom",
sex: "box",
// 添加構(gòu)造函數(shù)
constructor: function(name,sex){
if(name) {
this.name= name
}
if(sex){
this.sex= sex
}
}
showInfo:function(){
alert("hello" this.name "sex" this.sex)
}
})
?
調(diào)用類
// 開啟動(dòng)態(tài)加載
Ext.Loader.setConfig({enabled:true});
// 動(dòng)態(tài)加載 ?My.App 命名空間 MyApp 目錄
Ext.Loader.setPath("My.App","MyApp")
// 動(dòng)態(tài)加載類。
Ext.require('MyApp.student.Student')
Ext.onReady(function(){
var student = Ext.create("MyApp.student.Student","lisi","girl");
student.showInfo();
})
?
加載多個(gè)類
Ext.require({
'Ext.grid.*',
'Ext.data.*'
'Ext.util.*',
'Ext.grid.PaginScroller'
})
// 加載所有類 ，除了 Ext.data.* 所有類。
? Ext.exclude('Ext.data.*').require("*");
基本數(shù)據(jù)類型
? 字符串類型，日期型，布爾等基本數(shù)據(jù)類類型。
// 定義一個(gè)日期類型的數(shù)據(jù)。
var datel = new Date("2011-11-12");
var date = new Date(2011,11,12,12,1,12);
// 轉(zhuǎn)化為 字符串類型
alert(date.toLocaleDateString());
// 轉(zhuǎn)化為數(shù)值類型
alert(Number(data))
// 轉(zhuǎn)化為 布爾 ?假
var myFalse = new Boolean(false);
// 定義數(shù)值
var num = new Number(45.6)
alert(num)
?
函數(shù)執(zhí)行時(shí)間控制
主要有兩個(gè)方面 1.讓某個(gè)函數(shù)等待一段時(shí)間后自執(zhí)行嗎，
某個(gè)函數(shù)按這一定的頻率反復(fù)執(zhí)行。
? 1.等待函數(shù)執(zhí)行，頁面加載完畢等帶 3秒后彈出提示。
Eet.onReady(function(){
var funcl = function(name1,name2){
Ext.Msg.alert("hello," name1 " name2")
}
Ext.defer(funcl,3000,this,["zhangsan","lisi"]);
})
?
2.讓mydiv 每個(gè)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>
鍵盤事件監(jiān)聽
1.Ext.KeyMap ??簡歷鍵盤和用戶動(dòng)作之間的映射。
? Ext.getDoc ?當(dāng)前的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 其中一個(gè)被按下')）
}
}，
{
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 全選事件被組織，自定義執(zhí)行事件。')
}，
stopEvent: true
}
])
}）
?
Ext.KeyNav
Ext.keyNav ?主要是用來綁定方向建的
var div1 = Ext.get("div1);
var nav = new Ext.KeyNav(Ext.getDoc(),{
“l(fā)eft”: 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 一個(gè)對象，包含類成員
onClassCreated ?一個(gè)可選的回調(diào)函數(shù)，類創(chuàng)建好了之后，這個(gè)函數(shù)會(huì)被調(diào)用
例子：
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)
}
})
// ?使用這個(gè)類
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") ?// 建議使用實(shí)
例化對象
console.log(c.name)
console.log(c.sex)
?
建議使用Ext.create ?實(shí)例化
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 配置 （實(shí)例成員）
配置屬性 config, 自動(dòng)創(chuàng)建 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 屬性將為其屬性自動(dòng)添加 setter 和 ?getter 函數(shù)。
如果想修改 setter 的行為，可以重寫 apply 屬性方法， 該方法為setter 的內(nèi)部實(shí)現(xiàn)
? 具體代碼如下
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(); ?// 控制臺(tái)結(jié)果： dev: John
?
Ext.onReady(function(){
Ext.define("MyClass.A",{
config: {
name: "tom",
set: "mate",
age: 18
},
applyAge: function(val){
if(val < = 18){
alert("對不起，您未成年， 系統(tǒng)拒絕訪問");
this.config.age = 18;
}else{
this.config.age = val;
}
},
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(); ??// ?控制臺(tái)結(jié)果為 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èi)部實(shí)現(xiàn)首次調(diào)用和第n 此調(diào)用時(shí)不同的
?? 首次調(diào)用時(shí) getName 方法時(shí)內(nèi)部實(shí)現(xiàn)步驟如下 ：
1. 檢測對象是否有name 屬性，有則執(zhí)行步驟2 ，無責(zé)執(zhí)行步驟3，
2.返回name 屬性，并跟新內(nèi)部實(shí)現(xiàn)。
3.以config.name 為參數(shù)執(zhí)行 applyName 函數(shù)，因?yàn)閍pplyName
函數(shù)具體無 this.name = ...., 就會(huì)添加 name 屬性到對象中，
然后更新內(nèi)部實(shí)現(xiàn)（若 applyName 函數(shù) 體無 this.name=...
的語句，那么getName 方法內(nèi)部如下：
function() { retrun this [q];},直接返回對象的屬性。）
setter 和 getter ?是將 config 的成員屬性復(fù)制當(dāng)前類的成員屬性，
然后對成員屬性進(jìn)后續(xù)操作。
因此我在重寫 applyName 時(shí)候要注意遵守原則
?不要修改 config 的成員屬性值
而在類內(nèi)部成員函數(shù)中訪問config 的成員屬性如下
Ext.define("MyClass.A",function() {
config: {
name: "John Huang",
sex: "male"
},
showName: function() {
var ?name = this.name ||
ｔｈｉｓ．ｃｏｎｆｉｇ．ｎａｍｅ；
｝，
ｕｐｄａｔｅNａｍｅ：ｆｕｎｃｔｉｏｎ（ｖａｌ）｛
ｔｈｉｓ．ｎａｍｅ ＝ ｖａｌ
｝
})
?
組合屬性：
可用于實(shí)現(xiàn)多繼承，該屬性可以同步方式加載類文件，并實(shí)例化類。
基本用法：
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
?
方法同名時(shí)
多個(gè)mixins 類擁有同名函數(shù)
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 中后者的方法無法覆蓋前者的同名方法。
方法的調(diào)用遵循最近優(yōu)先原則，優(yōu)先級別順序從高到底——當(dāng)前類，
父類， mixins 類
當(dāng)前類引用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
?
類的靜態(tài)成員屬性(statics)
可以通過Ext.Class.statics 屬性來設(shè)置類的靜態(tài)成員。
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
?
定義內(nèi)部不能使用this.statics,成員名 的方式訪問靜態(tài)成員，而是要使用this.self
?靜態(tài)成員名， 或 this.statics(), 靜態(tài)成員名。
類定義外部使用“類名靜態(tài)成員”，來訪問靜態(tài)成員。
?
?
MVC
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'FWY' ?// 全局的名字 一般根據(jù)項(xiàng)目
appFolder : 'app', ／／ 動(dòng)態(tài)加載ｊｓ文件夾
lauch: function() {
Ext.create('Ext.container.Viewport',{
layout: "fit",
item: [{
xtype: 'panel',
title: "標(biāo)題"，
html:"內(nèi)容"
}]
})
}})
?
?
controller model store view
controller ?作為連接model store 和 view 的橋梁， 在mvc 開發(fā)模式中
起了至關(guān)重要的作用。如果說model 定義了數(shù)據(jù)模式， store 提供了數(shù)據(jù)
讀取的方法， view 用來展示數(shù)據(jù)，那么controller 將用來控制具體的
數(shù)據(jù)操作。
?
Application.js 文件
1.name : 應(yīng)用程序名稱 ?自定義的
2.appFolder 應(yīng)用程序的目錄，用來進(jìn)行動(dòng)態(tài)加載代碼的。
3.controllers 應(yīng)用程序使用到的控制器。
4.autoCreateViewport 是否自動(dòng)創(chuàng)建 Viewport,默認(rèn)為flase ，設(shè)置為 true
應(yīng)用程序自動(dòng)創(chuàng)建Viewport ，這個(gè)Viewport 的定義在我的們的app/
view/viewport.js 中；如果為false 的時(shí)候，我要在launch 中收到創(chuàng)建應(yīng)用視圖。
Viewport.js 的定義
Viewport 作為我們應(yīng)用程序的視圖模板，可以被單個(gè)定義在Viewport.js 文件中
它定義的很簡單，通常用來將一個(gè)或者多個(gè)view 作為它的子控件。
?
?
?
store ?作為數(shù)據(jù)倉庫， store 起到了數(shù)據(jù)存取的作用， grid, form 等
展現(xiàn)的數(shù)據(jù)是通過store 來提供的
controller 層
?
alias: 'widget.創(chuàng)建別名
?
initComonent: function () {
????
}'
demo 下載?https://github.com/ningmengxs/Extjs.git
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔為你收集整理的extjs 基础部分的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： es6 对象的扩展
- 下一篇： Extjs 数据代理