Ext Js MVC系列二 利用Application和Viewport進行應用程序初始化和頁面布局

通過上一篇我們已經對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創建組件和數據交互。