Extjs5开发学习-12-模块界面的总体设计.docx

Extjs5开发学习-12-模块界面的总体设计上一节中设计了一些模块自定义中用到的要素，为了直观起见，这一节先建立一个模块的主界面。看过我?/jfok/article/details块管理常规功能自定义系统的设计与实现?博客的人应该会有所了解了。一个模块的主界面是一个Grid，在其上方有个操作按钮的工具条，在左边有导航区域，在右边有一个记录明细的显示区域。下面即是一个例子： 下面我们来搭建这个界面，首先在view中建立目录module,在此目录下建立Module.js，ModuleController.js, moduleModel.js。这三个文件分别为模块的主界面，模块的控制器和模块的数据模型。然后在module下建立目录region,在这个目录下放置模块各个部分的控件，具体的控件和界面对应图如下： 下面来看看各个部分的代码：Module.js[javascript]?/jfok/article/detailsiew plain?/jfok/article/detailsopy?/**??*?一个模块的主控界面的容器，用来安放各个模块控件以及协调他们之间的关系??*/?Ext.define(app.view.module.Module,?{???extend?:?Ext.panel.Panel,????alias?:?widget.modulepanel,????requires?:?[app.view.module.ModuleController,?app.view.module.ModuleModel],????uses?:?[app.view.module.region.Navigate,?app.view.module.region.Grid,???app.view.module.region.Detail],????controller?:?module,???//?MVVM架构的控制器的名称，main控制器会自动加载，这个控制器不会自动加载，需要在requires中指定，不知道是为什么??viewModel?:?{???type?:?module??},???bind?:?{???//?glyph?:?{tf_glyph},?//?这一个绑定是无效的，在tabPanel渲染过后，再修改这个值，将不会有任何效果。??title?:?{tf_title}?//?这个绑定是有效的，可以根据ModuleModel中的值来设置title??},???layout?:?border,?//?模块采用border布局???initComponent?:?function()?{???this.glyph?=?this.getViewModel().get(tf_glyph);?//?由于上面的glyph的bind无效，因此需要在这里加入glyph的设置??this.items?=?[{???xtype?:?navigate,?//?导航区域??region?:?west,???width?:?250,???collapsible?:?true,???split?:?true??},?{???xtype?:?modulegrid,?//?模块的grid显示区域??region?:?center???},?{???xtype?:?recorddetail,?//?记录明细??region?:?east,???width?:?250,???collapsible?:?true,?//?可以折叠隐藏??collapseMode?:?mini,?//?折叠陷藏模式??split?:?true??//?可以拖动大小??}]????this.callParent();???}???})?? ModuleController.js[javascript]?/jfok/article/detailsiew plain?/jfok/article/detailsopy?/**??*?模块的控制器??*/??Ext.define(app.view.module.ModuleController,?{???extend?:?Ext.app.ViewController,????requires?:?[Ext.MessageBox,?Ext.window.Toast],????alias?:?controller.module,????init?:?function()?{???console.log(modulecontroller.init)???}????})?? ModuleModel.js[javascript]?/jfok/article