通過上一篇我們已經對Ext js MVC框架開發有了一個大概的了解，這一篇將利用Application和Viewport進行應用程序的初始化和頁面布局。我想從以下幾方面來進行總結。

1，通過Ext.Loader開啟動態加載功能
2，利用Application對象創建應用程序實例
3，利用Viewport和view進行頁面布局

通過Ext.Loader開啟動態加載功能

通過Loader對象我們可以開啟動態加載的依賴加載功能，我們一般通過它的setConfig方法開啟動態加載，通過setPath設置加載路徑，然后通過Ext.require方法加載相關類庫。代碼如下。

/** 開啟動態加載的依賴加載功能和設置插件的路徑，并加載相關類庫 **/ Ext.Loader.setConfig({ enabled: true });//開啟動態加載的依賴加載功能，默認為false不開啟 Ext.Loader.setPath('Ext.ux', '/Scripts/ux');//設置命名空間"Ext.ux"的路徑 Ext.require(['Ext.ux.CheckColumn', //加載相關類庫和它的直接依賴'Ext.ux.grid.FiltersFeature','Ext.ux.RowExpander','Ext.ux.grid.SPrint']);

利用Application對象創建應用程序實例

通過Application對象我們可以創建應用程序的實例，作為應用程序的單一入口。在Application中我們可以設置全局命名空間，應用程序路徑，是否開啟自動創建視口，和加載相關controller。代碼如下。

/** 創建應用程序的實例 **/ Ext.application({name: 'MyExt', //設定應用程序的命名空間(它將是controller,view.model和store的命名空間)appFolder: 'app', //設定應用程序的路徑autoCreateViewport: true,//開啟自動創建Viewport,它將自動去view目錄下查找Viewport文件并實例化controllers: [ //加載應用程序所用到的所有controller'UserController'] });

利用Viewport和view進行頁面布局

一個頁面只能有一個Viewport，它就像骨架一樣承載著多個view（這里指的上，下，左，右的panel），它是應用程序界面的載體。下面是創建Viewport視口的代碼。

/*** *自定義一個Viewport類繼承Ext.container.Viewport ***/Ext.define('MyExt.view.Viewport', {extend: 'Ext.container.Viewport',alias: 'widget.viewport',//在實例化前加載相關類，一定要先加載，否則在構造函數initComponent中無法使用 requires: ['MyExt.view.main.Top','MyExt.view.main.Bottom','MyExt.view.main.Left','MyExt.view.main.Content'],layout: 'border',//構造函數initComponent: function () {var me = this;Ext.applyIf(me,{//將上，下，左，右四個面板作為獨立的view進行實例化，然后作為item給Viewport items: [Ext.create('MyExt.view.main.Top'),Ext.create('MyExt.view.main.Bottom'),Ext.create('MyExt.view.main.Left'),Ext.create('MyExt.view.main.Content')]});me.callParent(arguments); //確保父類Ext.container.Viewport的構造函數能被調用 } });

這個是Top面板的代碼，其它三個面板都是一樣，作為一個獨立的view，需要的時候再實例化，這樣就達到了view復用的目的。

/*** *自定義一個Panel類繼承Ext.Panel ***/ Ext.define('MyExt.view.main.Top', {extend: 'Ext.Panel',alias: 'widget.top',initComponent: function () {var me = this;Ext.apply(this, {region: 'north',title: 'top',height: 100,layout:'border',html:'this is north panel'});me.callParent(arguments);} });

Bottom面板

/*** *自定義一個Panel類繼承Ext.Panel ***/ Ext.define('MyExt.view.main.Bottom', {extend: 'Ext.Panel',alias: 'widget.bottom',initComponent: function () {var me = this;Ext.apply(this, {region: 'south',title: 'south',height: 100,layout: 'border',html: 'this is south panel'});me.callParent(arguments);} });

Left面板

/*** *自定義一個Panel類繼承Ext.Panel ***/ Ext.define('MyExt.view.main.Left', {extend: 'Ext.Panel',alias: 'widget.left',initComponent: function () {var me = this;Ext.apply(this, {region: 'west',title: 'west',width: 200,layout: 'border',html: 'this is west panel'});me.callParent(arguments);} });

Content面板

/*** *自定義一個Panel類繼承Ext.Panel ***/ Ext.define('MyExt.view.main.Content', {extend: 'Ext.Panel',alias: 'widget.content',initComponent: function () {var me = this;Ext.apply(this, {region: 'center',title:'center',layout: 'fit',html: 'this is center panel'});me.callParent(arguments);} });

運行效果如圖。

這樣頁面的布局就算完成了，這里我們已經對view有一個初步的認識，它其實就是利用窗體控件panel,grid或form等進行用戶界面展示，我們最好將每一個view都定義成一個獨立的類，這樣需要使用的時候去實例化就好了，這樣達到了view復用的目的。下一篇我將總結如何利用view，store和model創建組件和數據交互。

轉載于:https://www.cnblogs.com/mcgrady/archive/2013/06/05/3119982.html

總結

以上是生活随笔為你收集整理的Ext Js MVC系列二 利用Application和Viewport进行应用程序初始化和页面布局的全部內容，希望文章能夠幫你解決所遇到的問題。

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