跟我一起学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();
}
})