对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案。在这个自定义系统进行设计的时候,我已经将这部分内容设计了进去,在ModuleModel.js中,在data下面有个属性tf_gridSchemes为数组型,你有多少种方案,都定义在这个下面就可以了,然后再创建一个控件可以根据这些定义来进行方案的选择,选择好以后让grid重新配置新的方案即可。

先来看一下新增一个方案的配置信息,在ModuleModel.js中,修改tf_gridSchemes为以下内容:

// 模块的grid方案,可以定义多个方案
tf_gridSchemes: [{
tf_schemeOrder: 10,
tf_schemeName: 'Grid方案1', // 第一个grid方案
// 表头分组
tf_schemeGroups: [{
tf_gridGroupId: 1, // id号
tf_gridGroupOrder: 10, // 表头分组序号
tf_gridGroupName: '工程项目基本信息',
tf_isShowHeaderSpans: true, // 是否显示分组
tf_isLocked: true, // 是否锁定此分组
// 每一个表头分组下面的字段
tf_groupFields: [{
tf_gridFieldOrder: 5,
tf_fieldId: 10100010
// 工程id号
}, {
tf_gridFieldOrder: 10,
tf_fieldId: 10100020, // 工程项目名称字段
tf_columnWidth: 200
}, {
tf_gridFieldOrder: 20,
tf_fieldId: 10100030, // 工程项目编码字段
tf_columnWidth: 120
}]
}, {
tf_gridGroupOrder: 20, // 表头分组序号
tf_gridGroupName: '工程项目附加信息',
tf_isShowHeaderSpans: false, // 是否显示headerspan
tf_isLocked: false, // 是否锁定此分组
tf_groupFields: [{
tf_gridFieldOrder: 10,
tf_fieldId: 10100040
}, {
tf_gridFieldOrder: 20,
tf_fieldId: 10100050
}, {
tf_gridFieldOrder: 30,
tf_fieldId: 10100060
}, {
tf_gridFieldOrder: 40,
tf_fieldId: 10100070
}, {
tf_gridFieldOrder: 50,
tf_fieldId: 10100080
}, {
tf_gridFieldOrder: 60,
tf_fieldId: 10100090, // 是否通过验收
tf_columnWidth: 80
}, {
tf_gridFieldOrder: 70,
tf_fieldId: 10100100,
tf_columnWidth: -1, // -1表示这我可以撑足最大宽度
tf_autoSizeDisabled: true // 不许自动适应宽度
// 工程方量
}]
}] }, {
tf_schemeOrder: 20,
tf_schemeName: 'Grid方案2', // 第二个grid方案
tf_schemeGroups: [{
tf_gridGroupId: 1, // id号
tf_gridGroupOrder: 10, // 表头分组序号
tf_gridGroupName: '工程项目主要信息',
tf_isShowHeaderSpans: false, // 是否显示分组
tf_isLocked: false, // 是否锁定此分组
tf_groupFields: [{
tf_gridFieldOrder: 5,
tf_fieldId: 10100010,
tf_isLocked: true
}, {
tf_gridFieldOrder: 10,
tf_fieldId: 10100020, // 工程项目名称字段
tf_columnWidth: 200,
tf_isLocked: true
}, {
tf_gridFieldOrder: 20,
tf_fieldId: 10100030, // 工程项目编码字段
tf_columnWidth: 120,
tf_isLocked: true }, {
tf_gridFieldOrder: 10,
tf_fieldId: 10100040
}, {
tf_gridFieldOrder: 20,
tf_fieldId: 10100050
}]
}]
}, {
tf_schemeOrder: 30,
tf_schemeName: 'Grid方案3', // 第三个grid方案
// 表头分组
tf_schemeGroups: [{
tf_gridGroupId: 1, // id号
tf_gridGroupOrder: 10, // 表头分组序号
tf_gridGroupName: '工程项目基本信息',
tf_isShowHeaderSpans: true, // 是否显示分组
tf_isLocked: true, // 是否锁定此分组
tf_groupFields: [{
tf_gridFieldOrder: 10,
tf_fieldId: 10100020, // 工程项目名称字段
tf_columnWidth: 200
}, {
tf_gridFieldOrder: 20,
tf_fieldId: 10100030, // 工程项目编码字段
tf_columnWidth: 120
}]
}, {
tf_gridGroupOrder: 20, // 表头分组序号
tf_gridGroupName: '工程项目附加信息',
tf_isShowHeaderSpans: true, // 是否显示headerspan
tf_isLocked: false, // 是否锁定此分组
tf_groupFields: [{
tf_gridFieldOrder: 10,
tf_fieldId: 10100040
}, {
tf_gridFieldOrder: 20,
tf_fieldId: 10100050
}, {
tf_gridFieldOrder: 30,
tf_fieldId: 10100060
}, {
tf_gridFieldOrder: 40,
tf_fieldId: 10100070
}, {
tf_gridFieldOrder: 50,
tf_fieldId: 10100080
}]
}] }]

在上面定义了三个gridScheme的方案,名称分别为“grid方案1”,“grid方案2”,“grid方案3”,每个方案下面又对字段分组,有些分组设置成了可以显示的二层表头,有些不显示多层表头,还设置了前面几列可以列锁定。数据有了,然后从Combo字段继承新建一个控件,用来可以选择这三个方案。在app/view/module下建立一个文件夹widget,将模块中用到的控件都放在这个下面。在widget目录中建立文件GridSchemeCombo.js。

/**
* 如果一个模块有多个Grid方案,那么在 pading上增加一个可以选择切换方案的Combo
*/ Ext.define('app.view.module.widget.GridSchemeCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.gridschemecombo',
fieldLabel: '方案',
editable: false,
labelWidth: 40,
labelAlign: 'right',
width: 200,
queryMode: 'local',
displayField: 'tf_schemeName', // data 中列表主案的名称
valueField: 'tf_schemeOrder', // data 中列表主案的序号
hidden: true, // 默认不显示,如果GridScheme的个数大于1则显示。
bind: {
hidden: '{gridSchemeHidden}', // 这是data中的一个计算字段,根据gridscheme个数来判断此控件是否显示
value: '{gridSchemeId}' // 绑定gridSchemeId的值,在grid中,也绑定此值,这里改变以后,会去执行grid中的绑定事件
},
initComponent: function () {
// 取得最顶层容器的viewModel,如果有更好的办法取得,请告知,谢谢
var viewModel = this.up('modulepanel').getViewModel();
this.store = Ext.create('Ext.data.Store', {
fields: ['tf_schemeOrder', 'tf_schemeName'],
data: viewModel.get('tf_gridSchemes')
});
this.value = viewModel.get('tf_gridSchemes')[0].tf_schemeOrder; // 默认的方案为第一个
this.callParent(arguments);
}
});

下面要在Grid的导航区域中加入此控件。先在uses中引入上面的控件,再修改bind,这样设置了bind 后,上面控件在选择了另一个方案以后,会来执行grid中的 setGridSchemeId这个函数,这个其实就是MVVM的本质。

bind : {
title : '{tf_title} {selectedNames}', // 数据绑定到ModuleModel中的tf_title和选中记录的名称
gridSchemeId : '{gridSchemeId}' // 属性gridSchemeId
// 设置绑定,和GridSchemeCombo是value绑定是一样的
},

下面加入改变了方案以后的执行函敉:

setGridSchemeId : function(value) {
if (this.gridSchemeId != value) {
this.gridSchemeId = value;
Ext.suspendLayouts();
this.columns = app.view.module.factory.ColumnsFactory.getColumns(this
.up('modulepanel').getViewModel(), value);
this.reconfigure(this.store, this.columns);
Ext.resumeLayouts(true);
this.columnAutoSize();
}
},

在pagingtoolbar中加入此控件:

// 创建grid列
// 默认第一个grid方案
this.gridSchemeId = viewModel.get('tf_gridSchemes')[0].tf_schemeOrder;
// 将第一个方案的columns生成,第一个方案是要先设置好,并不是gridschemecombo触发来生成的
this.columns = app.view.module.factory.ColumnsFactory.getColumns(viewModel); this.dockedItems = [{
xtype: 'gridtoolbar', // 按钮toolbar
dock: 'top',
grid: this
}, {
xtype: 'pagingtoolbar', // grid数据分页
store: this.store,
displayInfo: true,
prependButtons: true,
dock: 'bottom',
items: [{ // 在最前面加入grid方案的选择Combo
xtype: 'gridschemecombo'
}]
}];

ColumnsFactory.js的前面一部分也修改过了:

/**
* 用于生成Grid的Columns的类
*/ Ext.define('app.view.module.factory.ColumnsFactory', { statics : {
getColumns : function(moduleModel, schemeOrderId) {
var scheme = moduleModel.get('tf_gridSchemes')[0]; // 取得第一个grid的方案
if (schemeOrderId) { // 查找到相应的scheme
Ext.Array.each(moduleModel.get('tf_gridSchemes'), function(s) {
if (s.tf_schemeOrder == schemeOrderId) {
scheme = s;
return false;
}
})
}
var columns = [];

为了加这个功能,改了许多处代码,又遇到了很多的bug,大家在切换方案的时候就会看到bug了。经过以上的操作,在模块打开的时候,可以看到在pagingtoolbar上多了一个控件,可以选择来改变grid的column方案了。这个改变方案的步骤也是应用MVVM的特性,上面的代码中没有看到事件的执行代码,因为事件在bind后是自动去执行的。

下面贴一下加入此功能后的截图。

选择了第二个方案后

选择了第三个方案后

对于一个管理系统来说,你的grid有以上几节所写的功能,系统的档次立马提高不少。但是在你没有理解的情况下不要盲目加入,要对系统的设计到功能的内部操作过程都了解了再加入相应功能。这套自定义的系统中完全没有重复的界面类,每一个类都是为了完成新的功能而建立的,到现在这节为止是手工建立了20多个类来协同工作,内部流程已经非常复杂了。等这个系统完全做好,前台会有200多个自定义类,后台也有几百个控制类,没有一定的编程功底和设计能力的话就很难掌控。再加上功能越深入,extjs的bug就会出现的越多,这真是一个头疼的问题。

Grid的操作暂时告一段落,从下面会开始加入自定义Form、自定义图表的开发过程。

20、手把手教你Extjs5(二十)模块Grid的多列表方案的更多相关文章

  1. 12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块

    上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和 ...

  2. 18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增

    网页当中的拖放(drag-drop)是比较有趣的操作,extjs5中很好的封装了拖放的动作,也有各种类来支持,但是要学好“拖放”这个东西真是很难,特别是象我这样英语不好的人,看不太懂官网上的说明,做一 ...

  3. 19、手把手教你Extjs5(十九)模块Grid的其他功能的设想

    经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作.由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中. 比如对 ...

  4. 14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]

    model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作. /** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ ...

  5. 10、手把手教你Extjs5(十)自定义模块的设计

    从这一节开始我们来设计并完成一个自定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息.以下信息只是我自己在开发过程中想到或用到的,希望有新的想法的或者有建议的跟贴回复. 一个独立模块包含以下 ...

  6. 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染

    Grid各列已经能够展示出来了.列的类型包括字符型,整型,浮点型,货币型,百分比型,日期型和布尔型,我自定义了各种类型的渲染样式: 1.整型:标题栏居中,数值靠右显示,正数颜色为蓝色,负数颜色为红色, ...

  7. 2、手把手教你Extjs5(二)项目中文件的加载过程

    上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1、首先:浏览器中输入 localhost:1841 ,调用 index.html; ...

  8. 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择

    这一节来完成Grid中的金额字段的金额单位的转换.转换旰使用MVVM特性,总体上和控制菜单的几种模式类似.首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位 ...

  9. 21、手把手教你Extjs5(二十一)模块Form的自定义的设计

    前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1、可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能 ...

随机推荐

  1. cmd下载文件

    进入cmd 输入ftp 192.168.1.200 然后按照提示输入用户名和密码 cd 进入要下载的目录 dir 看操作权限 lcd查看本地要装下载文件的目录 prompt关闭交互模式 mget da ...

  2. HDU 5719 Arrange

    根据条件,某些位置的数字就可以确定了.确定过程中如果有冲突,则无解. 如果B中出现了递增,C中出现了递减,则无解. 对于每一个未确定的a[i],ans需要更新,ans=ans*((c[i]-b[i]+ ...

  3. opencart配置税率

    1.System->Localisation->Geo Zones新增税收区域 2.System->Localisation->Taxes->Tax Rates新增税率 ...

  4. AJAX(XMLHttpRequest)进行跨域请求方法详解(一)

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...

  5. 【转】PHP代码审计

    PHP代码审计 目录 1. 概述3 2. 输入验证和输出显示3 2.1 命令注入4 2.2 跨站脚本4 2.3 文件包含5 2.4 代码注入5 2.5 SQL注入6 2.6 XPath注入6 2.7 ...

  6. Fragment和Activity(转)

    Android Fragment和Activity Fragment和Activity Fragment和Activity的交互 一个Fragment的实例总是和包含它的Activity直接相关. f ...

  7. [转]android中解析后台返回的json字符串

    普通形式的:服务器端返回的json数据格式如下: {"userbean":{"Uid":"100196","Showname&qu ...

  8. HDU 1251 统计难题(字典树计算前缀数量)

    字典树应用,每个节点上对应的cnt是以它为前缀的单词的数量 #include<stdio.h> #include<string.h> struct trie { int cnt ...

  9. DWR Annotations

    DWR   Annotations DWR 标注是用来代替 dwr.xml 或者与其一同工作的. 1.初始配置 <servlet> <description>DWR contr ...

  10. H2Database高级特性

    http://wenku.baidu.com/link?url=mcSOmh5PRsKGO1kXzXqzZVjVPYR5sOWK_KIjw8qdpGHAkZsbWiK71lE9ToYwxLvJwL7b ...