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

Extjs5开发学习-12-模块界面的总体设计 上一节中设计了一些模块自定义中用到的要素，为了直观起见，这一节先建立一个模块的主界面。看过我? HYPERLINK /jfok/article/details\t _blank 模块管理常规功能自定义系统的设计与实现?博客的人应该会有所了解了。一个模块的主界面是一个Grid，在其上方有个操作按钮的工具条，在左边有导航区域，在右边有一个记录明细的显示区域。下面即是一个例子： ? ? ? ? 下面我们来搭建这个界面，首先在view中建立目录module,在此目录下建立Module.js，ModuleController.js, moduleModel.js。这三个文件分别为模块的主界面，模块的控制器和模块的数据模型。然后在module下建立目录region,在这个目录下放置模块各个部分的控件，具体的控件和界面对应图如下： ? ? ? ? 下面来看看各个部分的代码：Module.js [javascript]? HYPERLINK /jfok/article/details\o view plain view plain? HYPERLINK /jfok/article/details\o copy \t _blank copy ? /**? ?*?一个模块的主控界面的容器，用来安放各个模块控件以及协调他们之间的关系? ?*/?? 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,?//?可以折叠隐藏?? ???????