跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)
来源:互联网 发布:淘宝在线制作海报 编辑:程序博客网 时间:2024/04/29 23:55
跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)
经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作。由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中。
比如对于“Grid列宽的自动适应”这个功能,我们可以在系统设置项里加入“列宽自适应模式”,下面有三个选项:1、不自动适应;2、首次加载数据时自动适应;3、每次加载数据都自动适应。因为列宽自动适应需要时间,如果字段很多,记录很多会比较慢,因此可以加入这个设置,使用户根据自己的喜好来设置。还可以对每种类型的字段做一些设置,比如日期的显示格式、浮点型的数值要不要加分节符号,小数位数,颜色等等。
下面再介绍一个使用MVVM特性的小功能,在title上显示当前选中的记录的nameField。先截图看看效果:
下面具体的修改,先在Grid.js中将bind的语句改一下
bind : {title : '{tf_title} {selectedNames}' // 数据绑定到ModuleModel中的tf_title 和// 选中记录的名称},然后再在 ModuleModel.js中的data中加入属性:
selectedNames : '' //选中的记录的names显示在title上
Grid的记录选中事件在前几节中已经加了,只要修改一下事件函数就可以了,修改ModuleController.js
// 选中的记录发生变化过后的事件selectionChange : function(model, selected, eOpts) {// 设置删除按钮的状态this.getView().down('toolbar button#delete')[selected.length > 0? 'enable': 'disable']();var viewModel = this.getView().getViewModel();// 下面将组织选中的记录的name显示在title上,有二种方案可供选择,一种是用下面的MVVM特性,第二种是调用refreshTitle()var selectedNames = ''if (selected.length > 0) {if (!!selected[0].getNameValue())selectedNames = selectedNames + ' 『<em>' + selected[0].getNameValue()+ '</em>'+ (selected.length > 1 ? ' 等' + selected.length + '条' : '') + '』';}viewModel.set('selectedNames', selectedNames); // 修改ModuleModel中的数据,修改好后会自动更新bind的title// this.getView().down('grid').refreshTitle(); // 这是不用MVVM特性的做法},
简单的几句,就又加了一个新的功能。有问题或建议请回复,或与我联系:jfok1972@qq.com。
想下载源码的可以到我的资源里去下载,或者点击打开链接进入下载页面。
3 0
- 跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)
- 跟我一起学extjs5(14--模块字段和Grid列的定义[1])
- 跟我一起学extjs5(15--模块字段和Grid列的定义[2])
- 跟我一起学extjs5(21--模块Grid的多列表方案)
- 跟我一起学extjs5(11--自定义模块的设计)
- 跟我一起学extjs5(10--使用MVVM控制菜单样式,含前10节源码)
- 跟我一起学extjs5(16--各种Grid列的自定义渲染)
- 跟我一起学extjs5(17--Grid金额字段单位MVVM方式的选择)
- 跟我一起学extjs5(37--单个模块的设计[5取得模块列表数据])
- 跟我一起学extjs5(38--单个模块的设计[6取得模块列表数据])
- 跟我一起学extjs5(22--模块Form的自定义的设计)
- 跟我一起学extjs5(23--模块Form的自定义的设计[1])
- 跟我一起学extjs5(24--模块Form的自定义的设计[2])
- 跟我一起学extjs5(25--模块Form的自定义的设计[3])
- 跟我一起学extjs5(39--单个模块的设计[7数据的增加修改删除])
- 跟我一起学extjs5(12--模块界面的总体设计)
- 跟我一起学extjs5(18--模块的新增、修改、删除操作)
- 跟我一起学extjs5(19--模块记录的拖放删除、拖放复制新增)
- jQuery - 获得内容和属性
- Spring beans.xml(applicationContext.xml) 配置
- 经纬财富:四平怎么炒白银能挣到钱?
- Eclipse中提交代码时SVN冲突的解决办法
- 关于应用程序启动时,提示空指针问题
- 跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)
- 我是一名程序员1
- 树莓派设置静态IP
- UNP读书笔记第二章
- 【网络】网络基础知识
- 计算文件的MD5值
- position属性absolute与relative 详解
- 黑马程序员--C语言基本排序方法
- ArcGIS教程:创建随机栅格