ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合九:搭建布局结构
2013-05-16 13:13
435 查看
本人写的有些粗糙,也可能有理解不全或错误的地方,请各位理解。如果各位有问题,可以给我留言,或者参考官方文档,毕竟ExtJS不是简单的几篇文章就能说清的东西。在看本系统之前,需要对Web/MVC/ExtJS等都有些基础的知识。
开篇之前,把我自己的框架布局发上来:
![](http://img.blog.csdn.net/20130516125118624)
这个布局应该是一般系统主流的界面,当然,有些情况还在右侧有个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这些复杂的组件,以与客服端的数据通信等等,这些我打算放在以后的篇幅中说。
![](http://img.blog.csdn.net/20130516125526929)
添加角色:
![](http://img.blog.csdn.net/20130516125556420)
修改角色:
![](http://img.blog.csdn.net/20130516125630654)
![](http://img.blog.csdn.net/20130516130807027)
![](http://img.blog.csdn.net/20130516130900635)
下一篇准备说些ExtJS中常用的组件,比如grid、tree...
开篇之前,把我自己的框架布局发上来:
这个布局应该是一般系统主流的界面,当然,有些情况还在右侧有个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...
相关文章推荐
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合十:TreePanel 之 管理菜单
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合二:生成数据库
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合四:DbContext生命周期
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合四:DbContext生命周期
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合六:业务逻辑层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合八:ExtJS及其MVC
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合五:数据访问层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合一:构建项目框架
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合三:EF构建持久层
- ExtJS4.1+MVC3+Spring.NET1.3+EF5 整合七:数据传输对象
- 通过一个简单的文章系统学习MVC3+Linq搭建网站--项目文件结构介绍(3)
- 【ExtJs】利用树状结构、Border布局与标签页刻划OA界面
- 系统学习MVC3+Linq搭建网站--项目文件结构介绍(3)
- J2EE后台UI系统框架搭建-EXTJs使用(4.1 GPL版本)
- ASP.NET MVC4 中整合 NHibernate3.3、Spring.NET2.0、ExtJS4 笔记二:开发环境搭建
- struts2 spring3.2 hibernate4.1 框架搭建 整合
- extjs4.1环境搭建
- ExtJs4.1目录结构介绍和使用说明[转]
- Extjs 3.3.0 Struts2.2.1 struts2-json-plugin-2.2.1.jar struts2-convention-plugin-2.2.1.jar 树结构 整合
- QTP整合QC自动化测试--目录结构搭建