當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

extjs 基础部分

發(fā)布時間：2023/12/2 编程问答 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 extjs 基础部分小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

創(chuàng)建對象的方法：

　　　　使用new 關鍵字創(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:回調函數，當類創(chuàng)建完成后執(zhí)行該函數。

　　　　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 節(jié)點和日期等數據，以免保持舊的指向。

　　　　　　　　　　語法： Ext.clone(item)

　　　　　　　　item: 要復制的數組，對象，DOM 節(jié)點或日期，返回克隆后的。

　　　　產生id

　　　　　　語法： Exd.id([el,prefix]) 101

　　getBody

　　　　　　返回當前document 對象的body 元素

　　　　　　語法 Ext.getBody()

　　getHead

　　　　返回docuemnt 對象的head 元素

　　　　語法： Ext.getHead()

　　getDoc

　　　　返回document 對象

　　　　語法： Ext.getDoc()

　　Destroy

　　　　刪除對象及其事件,從DOM 中刪除節(jié)點。

　　　　語法： 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中靜態(tài)方法：

　　　　1.flexSetter

　　　　　　封裝一個只接收兩個參數的函數，封裝后，函數的參數會變的靈活。

　　　　　　　　語法： Ext.Function.flexSetter(fn);

　　　　　　　　　　fn 要封裝的函數; 該方法返回封裝厚度函數。

　　　　2.Bind

　　　　　　綁定函數的方法，主要作用是保持作用域。

　　　　　　　　語法： Ext.Function.bind(fn[,scope,args,appendArgs]);

????　　　　　　　　　　Ext.bind(fn[,scope,args,appendArgs]); ?// 簡寫

　　　　3.Pass

　　　　　　封裝一個新函數，在調用舊函數時，將預設的參數插入到新函數的參數前面作為舊函數的參數

　　　　　　　　該方法主要用于創(chuàng)建回調函數。

　　　　　　語法： Ext.Function.pass(fn,args[,scope])

　　　　　　　　fn 是要封裝的函數： args 是數組，為預設的參數, scope是可選參數，為函數的作用域。

　　　　4.Alias

　　　　　　為方法創(chuàng)建一個別名。

　　　　　　　　語法：Ext.Function.alias(object,methodName);

　　　　　　　　　　object 是要創(chuàng)建別名的對象； methodName 是字符串，創(chuàng)建

　　　　　　別名的方法名稱,該方法返回要創(chuàng)建別名的函數。

　　　　5.createInterceptor

　　　　　　創(chuàng)建一個阻攔函數。

　　　　　　　　語法：Ext.Function.createInterceptor(origFn,newFn[,scope,returnValue])

　　　　6.createDelayed

　　　　　　創(chuàng)建一個延時執(zhí)行的回調函數。

　　　　　　　　語法： Ext.Function.createDelayed(fn,delay[,scope,args,appends]);

　　　　7.Defer

　　　　　　在指定時間后執(zhí)行函數。

　　　　　　　　語法： Ext.Function.defer(fn,defay[,scope,args,appends]);

?　　　　　　　　　　Ext.defer(fn,defay[,scope,args,appends])

　　　　8.createSequence

　　　　　　創(chuàng)建一個函數，在執(zhí)行原始函數之后執(zhí)行指定的函數。

　　　　　　　　語法： Ext.Function.createSequence(origFn,newFn[,scope]);

　　　　9.createBuffered

　　　　　　創(chuàng)建一個緩沖函數。

　　　　　　　　語法： Ext.function.createBuffered(fn,buffer,scopr,args);

　　　　10.createThrottled

　　　　　　封裝那些被多次且迅速調用的函數。如鼠標移動事件，只有在距離上調用時間達到指定間隔后才會執(zhí)行操作。

　　　　11.Clone

　　　　　　為指定的函數創(chuàng)建一個克隆函數。

　　　　　　　　語法： Ext.Function.clone(fn);

　　　　　　　　　　其中，fn是要克隆的函數。

　　　　12.interceptBefore

　　　　　　在函數的原始操作之前執(zhí)行一個指定的操作。

　　　　　　　　Ext.Function.interceptBefore(object,methodName,fn[,scope]);

　　　　13.interceptAfter

　　　　　　在函數的原始操作之后執(zhí)行一個指定的操作。

　　　　　　　　語法: Ext.Function.interceptAfter(object, methodName,fn[,scope]);

Ext.Array 中的靜態(tài)方法

　　1.each

　　　　枚舉數組。

　　　　　　語法： Ext.Arrary.each(array,fn[,scope,reverse]);

????　　　　　　　　　　Ext.each(array,fn[,scope,reverse]) ?// 簡寫

　　　　　　　　　　　　array 是要枚舉的數組， fn 是枚舉每個項目時要執(zhí)行的回調函數， ?函數可以接受三個參數， 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.其它數組方法 ? ?

錯誤中的靜態(tài)方法：

　　　1.ignore ?布爾值，默認值為false 顯示錯誤報告。

　　　2.notify 作用與ignore 屬性相同。

　　　　創(chuàng)建類的類 ?Ext.Class ? ?

　　　　所有繼承類的基類： Ext.Base

　　　　實現動態(tài)加載： Ext.Loader ??

　　　　管理類的類： Ext.ClassManager

　　　　動態(tài)加載的路徑設置：? ?

　　事件及應用

　　　　綁定瀏覽器的時間的過程 Ext.EventManager

　　　　要為元素綁定事件，統(tǒng)稱會使用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

???　　　　?且其父節(jié)點的第一個子節(jié)點。

　　　　　　語法： 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

　　　　數據集

　　　　　　數據驗證及錯誤處理

　　　　　　　　模型的關系

　　　　　　　　管理數據模型

　　　　　　　　定義數據模型

　　　　　　　　數據模型的定義過程

　　　　　　　　數據模型的創(chuàng)建

　　　　　　　　數據模型的配置項，屬性和方法。

　　　　Store

　　　　　　定義類：

　　　　　　　　定義一個stadent 的類；在MyApp.student 命名空間。

　　　　　　　　　　Ext.defne("MyApp.student.Student",{

　　　　　　　　　　　　　　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)

　　　　　　}

　　　　})

　　調用類

　　　　　　　　// 開啟動態(tài)加載

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

　　　　　　　　// 動態(tài)加載 ?My.App 命名空間 MyApp 目錄

　　　　　　Ext.Loader.setPath("My.App","MyApp")

　　　　　　　　// 動態(tài)加載類。

　　　　　　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)

　　函數執(zhí)行時間控制

　　　　主要有兩個方面 1.讓某個函數等待一段時間后自執(zhí)行嗎，

　　　　某個函數按這一定的頻率反復執(zhí)行。

?　　　　1.等待函數執(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 每個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 ??簡歷鍵盤和用戶動作之間的映射。

?　　　　　　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 全選事件被組織，自定義執(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 一個對象，包含類成員

　　　　　　onClassCreated ?一個可選的回調函數，類創(chuàng)建好了之后，這個函數會被調用

　　　　例子：

Ext.define('My.sample.Person', {

　　　　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",

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",

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, 自動創(chuàng)建 setters 和 getters

　　??基本使用方法：

Ext.define("MyClass.A",{

config: {

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: {

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: {

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

Ext.onReady(function(){

Ext.define("MyClass.A",{

config: {

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: {

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 屬性，有則執(zhí)行步驟2 ，無責執(zhí)行步驟3，

2.返回name 屬性，并跟新內部實現。

3.以config.name 為參數執(zhí)行 applyName 函數，因為applyName

函數具體無 this.name = ...., 就會添加 name 屬性到對象中，

然后更新內部實現（若 applyName 函數體無 this.name=...

的語句，那么getName 方法內部如下：

function() { retrun this [q];},直接返回對象的屬性。）

setter 和 getter ?是將 config 的成員屬性復制當前類的成員屬性，

然后對成員屬性進后續(xù)操作。

因此我在重寫 applyName 時候要注意遵守原則

?不要修改 config 的成員屬性值

而在類內部成員函數中訪問config 的成員屬性如下

Ext.define("MyClass.A",function() {

config: {

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 中后者的方法無法覆蓋前者的同名方法。

方法的調用遵循最近優(yōu)先原則，優(yōu)先級別順序從高到底——當前類，

父類， 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

類的靜態(tài)成員屬性(statics)

　　　　可以通過Ext.Class.statics 屬性來設置類的靜態(tài)成員。

Ext.define("A",{

statics: {

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,成員名的方式訪問靜態(tài)成員，而是要使用this.self

?靜態(tài)成員名，或 this.statics(), 靜態(tài)成員名。

類定義外部使用“類名靜態(tài)成員”，來訪問靜態(tài)成員。

MVC

Ext.application({

requires: ['Ext.container.Viewport'],

appFolder : 'app', ／／　動態(tài)加載ｊｓ文件夾

lauch: function() {

Ext.create('Ext.container.Viewport',{

item: [{

xtype: 'panel',

title: "標題"，

html:"內容"

}]

　　})

}})

controller model store view

controller ?作為連接model store 和 view 的橋梁，在mvc 開發(fā)模式中

起了至關重要的作用。如果說model 定義了數據模式， store 提供了數據

讀取的方法， view 用來展示數據，那么controller 將用來控制具體的

數據操作。

Application.js 文件

1.name : 應用程序名稱 ?自定義的

2.appFolder 應用程序的目錄，用來進行動態(tài)加載代碼的。

3.controllers 應用程序使用到的控制器。

4.autoCreateViewport 是否自動創(chuàng)建 Viewport,默認為flase ，設置為 true

應用程序自動創(chuàng)建Viewport ，這個Viewport 的定義在我的們的app/

view/viewport.js 中；如果為false 的時候，我要在launch 中收到創(chuàng)建應用視圖。

Viewport.js 的定義

Viewport 作為我們應用程序的視圖模板，可以被單個定義在Viewport.js 文件中

它定義的很簡單，通常用來將一個或者多個view 作為它的子控件。

store ?作為數據倉庫， store 起到了數據存取的作用， grid, form 等

展現的數據是通過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)作獎勵來咯，堅持創(chuàng)作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的extjs 基础部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

基础
ExtJs