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