跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
来源:互联网 发布:淘宝ava123在线 编辑:程序博客网 时间:2024/03/29 10:35
跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
这一节来完成Grid中的金额字段的金额单位的转换。转换旰使用MVVM特性,总体上和控制菜单的几种模式类似。首先在目录app/view/main/menu下建立文件Monetary.js,用于放金额单位的数据和生成菜单的items。
/** * 金额单位的管理类 */Ext.define('app.view.main.menu.Monetary', {statics : {values : null,getAllMonetary : function() {if (!this.values) {// 初始化各种金额单位 元 千元 万元 百万元 亿元this.values = new Ext.util.MixedCollection();this.values.add('unit', this.createAMonetary('', 1, '元'));this.values.add('thousand', this.createAMonetary('千', 1000, '千元'));this.values.add('tenthousand', this.createAMonetary('万', 10000,'万元'));this.values.add('million', this.createAMonetary('M', 100 * 10000,'百万元'));this.values.add('hundredmillion', this.createAMonetary('亿', 10000* 10000, '亿元'));}return this.values;},// 生成菜单中的 itemsgetMonetaryMenu : function() {var items = [];this.getAllMonetary().eachKey(function(key, item) {items.push({text : item.unitText,value : key})})return items;},createAMonetary : function(monetaryText, monetaryUnit, unitText) {return {monetaryText : monetaryText, // 跟在数值后面的金额单位文字,如 100.00万monetaryUnit : monetaryUnit, // 显示的数值需要除的分子unitText : unitText // 跟在字段后面的单位如 合同金额(万元)}},getMonetary : function(key) {return this.getAllMonetary().get(key);}}})
{text : '金额单位',menu : [{xtype : 'segmentedbutton',reference : 'monetary',// 加入了这一句,在改变数据的时候可以触发bind绑定的事件defaultUI : 'default',value : 'tenthousand',items : app.view.main.menu.Monetary.getMonetaryMenu()}]}
生成的菜单如下:
在MainModels.js中的data属性下加入
monetary : { // 金额单位value : 'tenthousand' // 默认万元,以后可以从后台取得个人偏好设置,或者存放在cookies中},
在MainController.js中加入金额变更事件绑定和执行函数。
init : function() {var vm = this.getView().getViewModel();// 绑定金额单位修改过后需要去执行的程序vm.bind('{monetary.value}', function(value) {this.onMonetaryChange(value);}, this)},// 金额单位修改过后执行onMonetaryChange : function(value) {console.log('金额单位变更:' + value);var m = app.view.main.menu.Monetary.getMonetary(value);Ext.monetaryText = m.monetaryText; // 设置当前的全局的金额单位Ext.monetaryUnit = m.monetaryUnit;Ext.each(this.getView().query('modulegrid'), function(grid) {if (grid.rendered) {grid.getView().refresh();Ext.Array.forEach(grid.columnManager.getColumns(), function(column) {// 如果可以改变大小,并且是金额字段,则在改变了金额单位以后,自动调整一下列宽if (!column.resizeDisabled && column.fieldDefine&& column.fieldDefine.tf_isCurrency) {column.autoSize();}})}});}
经过以上几个步骤,在上节的基础上就可以更改金额单位,并实时的刷新所有已经打开的Grid中的金额字段,刷新了以后还会对金额字段重新调整列宽。
上面展示了转换过金额单位后金额字段的值的展示。事件的流转过程如下图:
对于Grid的column自动适应宽度,经过半天的研究,搞明白了一点,就是Renderer中,返回的应该是不加标签的值,具体的样式放在metaData中来定义。比如金额的Renderer函数修改为:(原来的函数看上一节)
// 金额字段monetaryRenderer : function(val, metaData, model, row, col, store, gridview) {if (val) {if (Ext.monetaryUnit && Ext.monetaryUnit != 1)val = val / Ext.monetaryUnit;// 正数用蓝色显示,负数用红色显示,必须css和返回的值分开来设置,否则不能autoSize()metaData.style = 'color:' + (val > 0 ? 'blue' : 'red') + ';float:right;';return Ext.util.Format.number(val, '0,000.00') + Ext.monetaryText;} elsereturn ''; // 如果为0,则不显示}原来把style的属性是放在返回的值里面的,这样在自动适应宽度的时候,extjs算不出到底有多宽,这样分开设置后,自动适应宽度就正常了。然后是在column的定义里面也要修改一下,不能用formatter,而要用renderer。例如对于整型的数据要改成这样:
case 'Integer' :Ext.apply(field, {align : 'center',xtype : 'numbercolumn',format : '#',renderer : Ext.util.Format.intRenderer,// formatter : 'intRenderer',editor : {xtype : 'numberfield'}});break;
3 1
- 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
- 跟我一起学extjs5(14--模块字段和Grid列的定义[1])
- 跟我一起学extjs5(15--模块字段和Grid列的定义[2])
- 跟我一起学extjs5(04--MVVM特性的简单说明)
- 跟我一起学extjs5(16--各种Grid列的自定义渲染)
- 跟我一起学extjs5(21--模块Grid的多列表方案)
- 跟我一起学extjs5(42--单个模块的数据新增方式)
- 跟我一起学extjs5(01--开发的总体说明)
- 跟我一起学extjs5(11--自定义模块的设计)
- 跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)
- 跟我一起学extjs5(10--使用MVVM控制菜单样式,含前10节源码)
- 跟我一起学extjs5(02--建立工程项目)
- 跟我一起学extjs5(07--继承自定义一个控件)
- 跟我一起学extjs5(08--自定义菜单1)
- 跟我一起学extjs5(09--自定义菜单2)
- 跟我一起学extjs5(22--模块Form的自定义的设计)
- 跟我一起学extjs5(23--模块Form的自定义的设计[1])
- 跟我一起学extjs5(24--模块Form的自定义的设计[2])
- 韩老师回答大一学生如何选择专业问题
- gethostbyname函数
- 正则中需要转义的特殊字符小结
- Android自定义开关按钮
- VS2010设置VC6的字体样式及背景色、选中字高亮
- 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
- Android字符串资源
- 好用的Eclipse插件
- 排序算法_C++11的实现
- iOS7判断应用的麦克风权限是否打开
- 1081. Rational Sum
- 什么是Android内核
- 搜索引擎优化之链接的价值
- sort()排序函数