【ExtJS】關於自訂群組件

標籤：style   blog   http   color   io   使用   ar   strong   for   

一、命名規範　　在你編碼過程中對類，名字空間以及檔案名稱使用統一的命名規則對你代碼的組織，結構化以及可讀性有很大的好處。1、類命名規範:　　類名最好只包含字母，在多數情況下，數字是不鼓勵使用的，除非非要用不可，也不要使用底線，-以及其它非字母字元，例如：　　　　 MyCompany.useful_util.Debug_Toolbar 不鼓勵這樣命名 　　　　MyCompany.util.Base64 可接受的命名 　　類名最好包括組織，在適當的名字空間通過使用.來訪問對象屬性，至少，類名應該有一個頂層的包。例如:　　　　 MyCompany.data.CoolProxy 　　　　MyCompany.Application

　　頂層的包名以及實際的類名應該使用CamelCased命名規範，其它應該為小寫，如下：　　　　 MyCompany.form.action.AutoLoad 　　不要使用Ext作為頂層包名，首字母應該遵循CamelCased命名規範，如:　　　　 Ext.data.JsonProxy instead of Ext.data.JSONProxy 　　　　MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser 　　　　MyCompany.server.Http instead of MyCompany.server.HTTP 2、源檔案命名規範:　　類名直接映射到儲存該類的檔案路徑，因此，每個檔案只能有一個類，如　　　　 Ext.util.Observable is stored in path/to/src/Ext/util/Observable.js 　　　　Ext.form.action.Submit is stored in path/to/src/Ext/form/action/Submit.js 　　　　MyCompany.chart.axis.Numeric is stored in path/to/src/MyCompany/chart/axis/Numeric.js　　path/to/src目錄包含應用的所有類，所有類應該放在這個公用根目錄下，以合適的名字空間來獲得最好的開發，管理以及部署體驗。 　　方法以及變數的命名規則與類命名相似，方法和變數的命名也只包含字母，數字不鼓勵使用，除非必須用到，同樣不使用底線，-以及其它非字母字元。　　方法和變數命名應該遵循CamelCased命名規範，應適用首字母。例如　　　　可接受的方法名: 　　　　　　encodeUsingMd5()　　　　　　用getHtml() 替代 getHTML() 　　　　　　用getJsonResponse()替代 getJSONResponse()　　　　　　用 parseXmlContent()替代parseXMLContent()　　　　可接受的變數名: 　　　　　　var isGoodName 　　　　　　var base64Encoder 　　　　　　var xmlReader 　　　　　　var httpServer3、屬性命名：　　類屬性命名和上面方法以及變數一樣，除了當屬性是靜態常量的時候。　　當屬性是靜態常量時，字母應該大寫。　　　　 Ext.MessageBox.YES = "Yes" 　　　　Ext.MessageBox.YES = "Yes" 　　　　Ext.MessageBox.NO = "No" 　　　　MyCompany.alien.Math.PI = "4.13"  二、define　　在ExtJS4之前，使用Ext.extend來建立類，在ExtJS4之後，使用Ext.define來建立類。
　　基本文法:　　Ext.define(className, members, onClassCreated);　　其中，　　　　className:類名　　　　members:這是一個對象，它表示一個以索引值對形式表示的類成員集合。　　　　onClassCreated:這是一個可定製的回呼函數，當這個類所依賴的類都準備完畢時便會調用這個回呼函數，並且類本身將會完全建立。由於有這個類建立新非同步屬性，這個回調在很多情況都會很有用。 例：

 1 Ext.define(‘MyComponent.getWH‘, { 2     showSize: function(){ 3             var dom = Ext.get(Ext.getBody().dom); 4             Ext.Msg.alert(‘My Component WH‘,‘Dom Width: ‘ + dom.getWidth() + ‘<br />Dom Height: ‘ + dom.getHeight()); 5     } 6 }); 7 Ext.onReady(function(){ 8     var myPanel = Ext.create(‘MyComponent.getWH‘,{ 9         renderTo: Ext.getBody()10     });11     myPanel.showSize();12 });

效果：

　　　

接下來的目標，就是在不同需求中，各種布局之下的組件功能的定製。

 

 

【ExtJS】關於自訂群組件