EXTJS元件化 二 簡易的私有和公有

2022-03-09 05:33:17 字數 2719 閱讀 9353

ext.namespace(

"lesson1.firstpanel"

);  

/*** @author andy_ghg

* @version 2023年9月24日23:22:09

* @description 第乙個派生類

* @class lesson1.firstpanel

* @extends ext.panel

*/lesson1.firstpanel=ext.extend(ext.panel,,  

labelwidth:55,  

defaulttype:"textfield"

,  items:[,]  

});  

this

.add(

this

.formpanel);  

},  

submitform:function

(),//          failure:function(){}

//      })

}  });  

我們可以看到,元件中所有的部件都是通過this.的方式來宣告的,這樣做有乙個好處,我們可以直接通過元件的例項化物件去訪問這些組成部分,例如:

js**  

//*測試

ext.onready(function

());  

alert(panel.formpanel);  

});  

//*/

這裡彈出的是乙個object,說明我們成功訪問了元件內部的成員,這樣做的好處很多,我們可以通過例項化物件來獲取它內部的成員,從而操作它內部的成員.

但是,我們在很多情況下是不願意讓別人去呼叫裡面的東西的,怎麼辦?可以使用var關鍵字來建立元件內部私有的成員,這樣,外部就不可以通過例項化物件去訪問它們了:

js**  

ext.namespace(

"lesson2.firstpanel"

);  

/*** @author andy_ghg

* @version 2023年9月25日20:30:15

* @description 私有與公有

* @class lesson2.firstpanel

* @extends ext.panel

*/lesson2.firstpanel = ext.extend(ext.panel,  

});  

//*測試

ext.onready(function

());  

alert(panel.privateobj);  

alert(panel.publicobj);  

});  

//*/

第一次彈出的是undifined第二次彈出的是object,其實這個非常容易理解,上面的**privateobj是作為乙個物件存在的,而publicobj則是作為乙個lesson2.firstpane的成員存在的,自然,publicobj就可以通過例項化物件被訪問到,而privateobj由於作用域的不同,自然就無法被外部函式訪問到.

其實這種私有物件的寫法沒有太大用處,我一般是將函式作為私有來用的,而物件則沒有必要私有化:

js**  

ext.namespace(

"lesson2.firstpanel"

);  

/*** @author andy_ghg

* @version 2023年9月24日23:22:09

* @description 私有與公有

* @class lesson2.firstpanel

* @extends ext.panel

*/lesson2.firstpanel = ext.extend(ext.panel,  

this

.publicfn=

function

()  

this

.buttons=[,]  

}  });  

公開的函式可以不必定義在初始化方法裡,一般都是定義在初始化方法外面的,就例如上面第一段**中的submitform函式一樣.

在使用這種寫法的時候要注意乙個問題,就是,定義元件內部的成員的時候,是通過this.的方式去定義的,但是如果元件自身就有這個屬性就會造成重寫,比如下面的**將不會顯示title裡的文字:

js**  

ext.namespace(

"lesson2.firstpanel"

);  

/*** @author andy_ghg

* @version 2023年9月24日23:22:09

* @description 私有與公有

* @class lesson2.firstpanel

* @extends ext.panel

*/lesson2.firstpanel = ext.extend(ext.panel,  

});  

//*測試

ext.onready(function

());  

panel.publicfn();  

});  

//*/

我們可以看到設定的title沒有被展現出來,所以,當我們在新定義乙個元件內部成員的時候一定要避免與元件父類裡的成員衝突(除非你是刻意要重寫),以免造成不必要的麻煩.這裡就要考驗你對你所繼承的父類的認知程度了.

(未完待續)

ExtJS 元件的擴充套件和繼承(一)

擴充套件元件的時候,最好給其設定單獨的 xtype,這樣就能比較容易的和其他元件整合。雖說擴充套件 extjs 的元件只不過是用 ext.extend 來實現,多少還是有些竅門。例 擴充套件 ext.panel,得到名為 mycomponent 的元件。xtype 設定為 mycomponent。m...

EXTJS元件化 三 元件之間的曖昧關係

我忽然發現,菜鳥更願意與人分享他的學習成果.在開發過程中,當許多小組件拼合成乙個大元件之後,最先遇到的問題就是元件與元件之間的通訊和資料互動.如果你的元件封裝的比較死 即在建立的時候不需要配置屬性 則可以通過組建的自定義事件來完成元件與元件之間的專案呼叫.下面的介面其實沒有必要這麼做,這麼做的目的只...

談談Ext JS的元件 布局的用法續二

絕對布局讓我回憶到了使用foxpro開發的時候,哪時候的介面布局就是這樣。通過設定控制項的左上角座標 x。y 和寬度來進行的,由於輸入控制項的高度基本是固定的。所以不須要設定。在視覺化程式設計沒有出現之前,開發介面算是個苦差事,由於布局是須要花費不少功夫的。比如想要在已經定義好的元件中插入乙個元件,...