標籤：extjs5 sencha 開發經驗
上一節中用sencha工具自動建立了一個項目，並且可以在瀏覽器中查看。現在我們來看看js類載入過程。如所示：
1?首先：瀏覽器中輸入 localhost:1841 ，調用 index.html;<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <title>app</title> <!-- The line below must be kept intact for Sencha Cmd to build your application --> <script id="microloader" type="text/javascript" src="bootstrap.js"></script></head><body></body></html>
在這裡面只引入了一個檔案：bootstrap.js。這是一個神奇的檔案，他根據設定檔bootstrap.json來設定extjs的類的調用路徑、引入css，最後再根據設定檔中的資訊，載入app.js。這個檔案只要知道這些功能就行了，要瞭解具體的內部實現，可以去搜尋一下相關文章。
2?app.js檔案的說明
Ext.application({ name: 'app',//應用的名稱app extend: 'app.Application', //繼承自app.Application,這個檔案是 app/Application.js autoCreateViewport: 'app.view.main.Main' //自動建立的Viewport的類名,檔案在 app/view/main/Main.js});上面的類中會根據類載入的設定資訊，自動為類 app.Application負載檔案 /app/Application.js,同樣也為app.view.main.Main類找到js檔案並載入。
3?Application.js檔案
Ext.define('app.Application', {extend : 'Ext.app.Application',name : 'app',views : [], // ＭＶＣ用到的viewcontrollers : ['Root'// MVC控制器的名稱，會自動到 /app/controller下去載入同名的js檔案// 對於Root,會去自動載入 /app/Controller/Root.js 這個檔案],stores : [],launch : function() {// 需要執行的語句可以加在此處}});
4、Main.js 檔案Ext.define('app.view.main.Main', { extend: 'Ext.container.Container', xtype: 'app-main', controller: 'main', //MVVM架構的控制器的名稱，會在當前路徑中根據‘Main’ + Controller 來確定檔案名稱 //這個我沒找到其他任何可以自動載入MainController.js的依據，只能作上面的判斷了 viewModel: { type: 'main' //MVVM架構的viewModel的類型，會在當前路徑中根據‘Main’ + Model 來確定檔案名稱 }, layout: { type: 'border'//系統的首頁面的布局 }, items: [{ xtype: 'panel', bind: { title: '{name}' }, region: 'west',//左邊面板 html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>', width: 250, split: true, tbar: [{ text: 'Button', handler: 'onClickButton' }] },{ region: 'center',//中間面版 xtype: 'tabpanel', items:[{ title: 'Tab 1', html: '<h2>Content appropriate for the current navigation.</h2>' }] }]});上面的類是繼承自Container的一個容器類，這個類使用了extjs5的mvvm的新特性，
controller: 'main', //MVVM架構的控制器的名稱，會在當前路徑中根據‘Main’ + Controller 來確定檔案名稱 //這個我沒找到其他任何可以自動載入MainController.js的依據，只能作上面的判斷了 viewModel: { type: 'main' //MVVM架構的viewModel的類型，會在當前路徑中根據‘Main’ + Model 來確定檔案名稱 },
上面的屬性controller表示當前Main類的控制器為"main",這個類裡沒有引用控制器的語句，因此控制器的類名可能是有其預設的載入規則，應該是在當前路徑中載入“Main”+"Controller.js"，這個檔案作為控制器。viewModel屬性定義了ＶＭ的類型，其載入類的規則和上面控制器是一樣的。
由於此類是作為一個 autoCreateViewport 屬性被載入，載入完成後會立即產生一個執行個體，並渲染，就是我們看到的網頁。
extjs中類的動態載入機制很靈活，這裡也不能全部講到，有不明白的可以尋找相關資料。在用sencha cmd 對js 進行編譯以後，會將所有的js ,包括使用者手工寫的和extjs5 sdk中用到的類全部放在一個檔案中，發布的時候就只有一個大的js檔案。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
