ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合九：搭建布局结构

本人写的有些粗糙，也可能有理解不全或错误的地方，请各位理解。如果各位有问题，可以给我留言，或者参考官方文档，毕竟ExtJS不是简单的几篇文章就能说清的东西。在看本系统之前，需要对Web/MVC/ExtJS等都有些基础的知识。

开篇之前，把我自己的框架布局发上来：

这个布局应该是一般系统主流的界面，当然，有些情况还在右侧有个panel，我这里不需要也就没用。

顶部一般用来显示项目名称，快捷导航菜单以及登录、退出等，左侧用来显示当前用户可管理的树型菜单，右侧是数据管理窗口，下方一般用来显示当前登录用户的基本信息，如工号、姓名等。

在ExtJS中，整个界面框架是个Viewport对象，以满屏填充整个可视窗口，Viewport可以使用边框布局，以包含5个子元素，分别为：上、下、左、右和中间，按照老外的习惯这5个分别命名为：'north','south','west','east'和'center'，其中'center'是必须的。每个子元素都是一个panel对象，其中以可以嵌套其他的子元素，比如左侧嵌套的就是一个Tree，并在其controller中捕获itemclick事件，当菜单被点击时触发，通过获取点击的节点对象，在'center'中渲染相应模块的默认视图。

'north'和'south'布局完全可以由panel和其他元素嵌套实现，'center'中根据不同的业务功能，渲染不同的ExtJS组件，像上图中就是加载了一个类型是GridPanel的组件。

由于js文件太多，一个一个说的话，看也后面的还要回顾前面的代码，也不方便。所以，我打算把上图示中框架结构部分的代码发出来，然后把几个主要模块截个图，最后放目前所有的源代码。其实里面有很多要说的东西，像GridPanel、TreePanel这些复杂的组件，以与客服端的数据通信等等，这些我打算放在以后的篇幅中说。

1 框架结构

1.1 app/view/Viewport.js

Ext.define('Manage.view.Viewport', {
    extend: 'Ext.container.Viewport',
    requires: [
        'Manage.view.Head',
        'Manage.view.Menu',
        'Manage.view.Foot',
        'Manage.view.Body'
    ],
    layout: 'border',//边框布局
    items: [{
        region: 'north',//上
        height: 45,
        xtype: 'head'
    },{
        region: 'west',//左
        width: 225,
        xtype: 'menu'
    },{
        region: 'south',//下
        height: 25,
        xtype: 'foot'
    },{
        region: 'center',//中
        xtype: 'body'
    }]
});

1.2 app/view/Head.js

Ext.define('Manage.view.Head', {
	extend : 'Ext.panel.Panel',
	alias : 'widget.head',
	margins : '5 5 0 5',
	split : true,
	header : false,
	collapsible : true,
	initComponent : function() {
		this.html = "<div>加载中...</div>";//定义默认的内容
		this.callParent(arguments);
	}
});

1.3 app/view/Foot.js

Ext.define('Manage.view.Foot', {
	extend : 'Ext.panel.Panel',
	alias : 'widget.foot',
	margins : '5 5 5 5',
	header : false,
	frame : true,
	collapsible : true,
	initComponent : function() {
		this.callParent(arguments);
	}
});

1.4 app/view/Menu.js

Ext.define('Manage.view.Menu', {
    extend : 'Ext.panel.Panel',//从Panel继承
    alias : 'widget.menu',//定义别名
    margins : '0 0 0 5',
    split : true,
    collapsible : true,
    header : true,
    title: '管理菜单',
    iconCls: 'Table',
	initComponent : function() {
	    this.items = [{ xtype: 'menuTree' }];//与其他不同，这里加载了个名称为menuTree的视图对象，请参考上篇代码和源码
		this.callParent(arguments);
	}
});

1.5 app/view/Body.js

Ext.define('Manage.view.Body', {
    id: 'bodyID',
    extend: 'Ext.panel.Panel',//从panel继承
    alias: 'widget.body',//定义别名
    margins: '0 5 0 0',
    border: 0,//边框为0px
    header: false,//不显示标题
    baseCls: 'x-plain',
    collapsible: true,
    initComponent: function () {
        this.items = [{//与Menu类似，也加了个名称为roleLit的视图对象
            xtype: 'roleList'
        }];
        this.callParent(arguments);
    }
});

2 各模块截图

2.1 角色管理部分

角色列表：

添加角色：

修改角色：

2.2 分类管理

2.3 权限管理

3 项目源码

截止2013.5.16日，链接：http://download.csdn.net/detail/xz2001/5388765

下一篇准备说些ExtJS中常用的组件，比如grid、tree...