通過(guò)上一篇我們已經(jīng)對(duì)Ext js MVC框架開(kāi)發(fā)有了一個(gè)大概的了解，這一篇將利用Application和Viewport進(jìn)行應(yīng)用程序的初始化和頁(yè)面布局。我想從以下幾方面來(lái)進(jìn)行總結(jié)。

1，通過(guò)Ext.Loader開(kāi)啟動(dòng)態(tài)加載功能
2，利用Application對(duì)象創(chuàng)建應(yīng)用程序?qū)嵗?br />3，利用Viewport和view進(jìn)行頁(yè)面布局

通過(guò)Ext.Loader開(kāi)啟動(dòng)態(tài)加載功能

通過(guò)Loader對(duì)象我們可以開(kāi)啟動(dòng)態(tài)加載的依賴加載功能，我們一般通過(guò)它的setConfig方法開(kāi)啟動(dòng)態(tài)加載，通過(guò)setPath設(shè)置加載路徑，然后通過(guò)Ext.require方法加載相關(guān)類庫(kù)。代碼如下。

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

利用Application對(duì)象創(chuàng)建應(yīng)用程序?qū)嵗?/h2>

通過(guò)Application對(duì)象我們可以創(chuàng)建應(yīng)用程序的實(shí)例，作為應(yīng)用程序的單一入口。在Application中我們可以設(shè)置全局命名空間，應(yīng)用程序路徑，是否開(kāi)啟自動(dòng)創(chuàng)建視口，和加載相關(guān)controller。代碼如下。

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

利用Viewport和view進(jìn)行頁(yè)面布局

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

/*** *自定義一個(gè)Viewport類繼承Ext.container.Viewport ***/Ext.define('MyExt.view.Viewport', {extend: 'Ext.container.Viewport',alias: 'widget.viewport',//在實(shí)例化前加載相關(guān)類，一定要先加載，否則在構(gòu)造函數(shù)initComponent中無(wú)法使用 requires: ['MyExt.view.main.Top','MyExt.view.main.Bottom','MyExt.view.main.Left','MyExt.view.main.Content'],layout: 'border',//構(gòu)造函數(shù)initComponent: function () {var me = this;Ext.applyIf(me,{//將上，下，左，右四個(gè)面板作為獨(dú)立的view進(jìn)行實(shí)例化，然后作為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的構(gòu)造函數(shù)能被調(diào)用 } });

這個(gè)是Top面板的代碼，其它三個(gè)面板都是一樣，作為一個(gè)獨(dú)立的view，需要的時(shí)候再實(shí)例化，這樣就達(dá)到了view復(fù)用的目的。

/*** *自定義一個(gè)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面板

/*** *自定義一個(gè)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面板

/*** *自定義一個(gè)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面板

/*** *自定義一個(gè)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);} });

運(yùn)行效果如圖。

這樣頁(yè)面的布局就算完成了，這里我們已經(jīng)對(duì)view有一個(gè)初步的認(rèn)識(shí)，它其實(shí)就是利用窗體控件panel,grid或form等進(jìn)行用戶界面展示，我們最好將每一個(gè)view都定義成一個(gè)獨(dú)立的類，這樣需要使用的時(shí)候去實(shí)例化就好了，這樣達(dá)到了view復(fù)用的目的。下一篇我將總結(jié)如何利用view，store和model創(chuàng)建組件和數(shù)據(jù)交互。

轉(zhuǎn)載于:https://www.cnblogs.com/mcgrady/archive/2013/06/05/3119982.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。