19、手把手教你Extjs5(十九)模块Grid的其他功能的设想
2015-11-26 10:52
477 查看
经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作。由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中。
比如对于“Grid列宽的自动适应”这个功能,我们可以在系统设置项里加入“列宽自适应模式”,下面有三个选项:1、不自动适应;2、首次加载数据时自动适应;3、每次加载数据都自动适应。因为列宽自动适应需要时间,如果字段很多,记录很多会比较慢,因此可以加入这个设置,使用户根据自己的喜好来设置。还可以对每种类型的字段做一些设置,比如日期的显示格式、浮点型的数值要不要加分节符号,小数位数,颜色等等。
下面再介绍一个使用MVVM特性的小功能,在title上显示当前选中的记录的nameField。先截图看看效果:
下面具体的修改,先在Grid.js中将bind的语句改一下
然后再在 ModuleModel.js中的data中加入属性:
Grid的记录选中事件在前几节中已经加了,只要修改一下事件函数就可以了,修改ModuleController.js
比如对于“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特性的做法 },
相关文章推荐
- 18、手把手教你Extjs5(十八)模块记录的拖放删除、拖放复制新增
- 17、手把手教你Extjs5(十七)模块的新增、修改、删除操作
- 16、手把手教你Extjs5(十六)Grid金额字段单位MVVM方式的选择
- 15、手把手教你Extjs5(十五)各种Grid列的自定义渲染
- 14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]
- 13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]
- 12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块
- 11、手把手教你Extjs5(十一)模块界面的总体设计
- 10、手把手教你Extjs5(十)自定义模块的设计
- 8、手把手教你Extjs5(八)自定义菜单2
- 7、手把手教你Extjs5(七)自定义菜单1
- 6、手把手教你Extjs5(六)继承自定义一个控件
- 用js 动态的更改类名为 ".correctControl" div 的 背景色
- rsyslog通过自定义json格式发送日志信息给logstash
- js解析map
- sublime text 3 有 javascript 提示插件吗?
- js操作textarea方法集合
- JsonToMap and getMapFromStrToMap
- js分页算法
- JSTL 嵌套函数的有效使用