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创建组件和数据交互。