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();
}

})