11、手把手教你Extjs5（十一）模块界面的总体设计
上一节中设计了一些模块自定义中用到的要素，为了直观起见，这一节先建立一个模块的主界面。看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了。一个模块的主界面是一个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.ModuleController', { extend: 'Ext.app.ViewController', requires: ['Ext.MessageBox', 'Ext.window.Toast'], alias: 'controller.module', init: function () { console.log('modulecontroller.init') } })
下面看看四个模块控件的源码：
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(); } })
