跟我一起学extjs5(12--模块界面的总体设计)
上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面。看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了。一个模块的主界面是一个Grid,在其上方有个操作按钮的工具条,在左边有导航区域,在右边有一个记录明细的显示区域。下面即是一个例子:
下面我们来搭建这个界面,首先在view中建立目录module,在此目录下建立Module.js,ModuleController.js, moduleModel.js。这三个文件分别为模块的主界面,模块的控制器和模块的数据模型。然后在module下建立目录region,在这个目录下放置模块各个部分的控件,具体的控件和界面对应图如下:
下面来看看各个部分的代码:Module.js
/** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ 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
/** * 模块的控制器 */ 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
/** * 模块的数据模型 */ Ext.define('app.view.module.ModuleModel', { extend : 'Ext.app.ViewModel', alias : 'viewmodel.module', // 在开发过程中我先用设定好的值放于data中,等以后自定义的时候,data里的值都是从后台取得的 // 所有数据库里的字段,我都以tf_开头,只是为了表示这是从后台读取过来的 data : { tf_moduleId : '1010', // 模块ID号:一个数字的ID号,可以根据此ID号的顺序将相同分组的模块放在一块。 tf_ModuleGroup : '工程管理',// 模块分组:模块分到哪个组里,比如说业务模块1、业务模块2、系统设置、系统管理等。 tf_moduleName : 'Global', // 模块标识:系统中唯一的模块的标识 tf_title : '工程项目',// 模块名称:能够描述此模块信息的名称。 tf_glyph : 0xf0f7, // 图标字符值 tf_shortname : null,// 模块简称:如果名称过长,有些地方可以用简称来代替。 tf_englishName : null,// 模块英文名称:万一要制作英文版,可以用英文名称。 tf_englishShortName : null, // 模块英文简称:可以用作生成编码字段。 tf_description : null,// 模块描述: tf_remark : null // 备注: // 下面还有若干字段未加入,以后用到的时候再加入 } })
下面看看四个模块控件的源码:
Grid.js
/** * 模块数据的主显示区域,继承自Grid */ Ext.define('app.view.module.region.Grid', { extend : 'Ext.grid.Panel', alias : 'widget.modulegrid', uses : ['app.view.module.region.GridToolbar'], bind : { title : '{tf_title}' // 数据绑定到ModuleModel中的tf_title }, dockedItems : [{ xtype : 'gridtoolbar', // 按钮toolbar dock : 'top' }], // 自定义字段的还没有做,先放几个固定的 columns : [{ dataIndex : 'tf_name', text : '工程项目名称', width : 250 }, { dataIndex : 'tf_budget', text : '投资总额' }], store : new Ext.data.Store({ fields : ['tf_name', { name : 'tf_budget', type : 'float' }], data : [{ tf_name : '安居房建设工程', tf_budget : 1230000 }, { tf_name : '道路建设工程', tf_budget : 453092 }] }) })
GridToolbar.js
/** * 一个模块的grid上面显示的toolbar,里面放置了各种操作按钮 暂时还没有考虑到权限 */ Ext.define('app.view.module.region.GridToolbar', { extend : 'Ext.toolbar.Toolbar', alias : 'widget.gridtoolbar', uses : ['app.ux.GridSearchField'], initComponent : function() { this.items = [{ text : '显示', glyph : 0xf022 }, { text : '新增', xtype : 'splitbutton', glyph : 0xf016, menu : [{ text : '复制新增', tooltip : '新增时先将当前记录添入到新记录中', glyph : 0xf0c5 }, '-', { text : '上传Excel表单条新增', tooltip : '根据指定的excel表添好数据后,上传新增一条记录', glyph : 0xf062 }, { text : '上传Excel表批量新增', tooltip : '根据下载的Excel表中的要求添加数据后,上传批量新增数据', glyph : 0xf062 }] }, { text : '修改', glyph : 0xf044 }, { text : '删除', glyph : 0xf014 }, '-', { glyph : 0xf0c6, xtype : 'splitbutton', menu : [{ text : '新增附件', icon : 'images/button/additionadd.png', glyph : 0xf093 }, '-', { text : '预览所有附件', glyph : 0xf03e }, '-', { text : '下载所有附件', glyph : 0xf019 }] }, { xtype : 'splitbutton', glyph : 0xf0ce, menu : [{ text : '列表导出至excel', glyph : 0xf0ce }, '-', { text : '选中记录导出至excel', glyph : 0xf0ce }] }, { xtype : 'splitbutton', glyph : 0xf02f, menu : [{ text : '打印当前页', glyph : 0xf02f }, { text : '打印所有记录', glyph : 0xf02f }] }, '-', '筛选', { width : 60, xtype : 'gridsearchfield', store : Ext.create('Ext.data.Store', { proxy : { type : 'rest' } }) }]; this.callParent(); } })
Navigate.js
/** * 导航区域的主控界面,这是这个系统的核心控件之一 */ Ext.define('app.view.module.region.Navigate', { extend : 'Ext.panel.Panel', alias : 'widget.navigate', // glyph : 0xf0d0, title : '导航', initComponent : function() { this.callParent(); } })
Detail.js
/** * 选中了grid中的一条记录,显示明细的区域,放在右边 */ Ext.define('app.view.module.region.Detail', { extend : 'Ext.grid.property.Grid', alias : 'widget.recorddetail', //glyph : 0xf0ca, //加了这一条,那个在最顶右侧可以隐藏此panel的按钮就不见,extjs真是bug一袋子,bug一屋子 title : '记录明细', initComponent : function() { this.source = { '工程项目名称' : 'title', '投资总额' : 2929292 } this.callParent(); } })
跟我一起学extjs5(12--模块界面的总体设计)
时间: 2024-10-29 19:11:50