码迷,mamicode.com
首页 > Web开发 > 详细

跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)

时间:2014-07-16 16:14:08      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:extjs5   sencha   开发经验   

跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)


        经过对自定义模块和Grid的设计和编码,现在已经能对一个有配置信息的模块来生成界面并进行一些简单的CURD操作。由于这是一个全解释性的前台的架构,因此你想到的任何新主意都可以放到所有的模块中。
        比如对于“Grid列宽的自动适应”这个功能,我们可以在系统设置项里加入“列宽自适应模式”,下面有三个选项:1、不自动适应;2、首次加载数据时自动适应;3?每次加载数据都自动适应。因为列宽自动适应需要时间,如果字段很多,记录很多会比较慢,因此可以加入这个设置,使用户根据自己的喜好来设置。还可以对每种类型的字段做一些设置,比如日期的显示格式、浮点型的数值要不要加分节符号,小数位数,颜色等等。
        下面再介绍一个使用MVVM特性的小功能,在title上显示当前选中的记录的nameField。先截图看看效果:
bubuko.com,布布扣

bubuko.com,布布扣

        下面具体的修改,先在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特性的做法
	},

        简单的几句,就又加了一个新的功能。Grid的操作暂时告一段落,从下面会开始加入自定义Form、自定义图表的开发过程。有问题或建议请回复,或与我联系:jfok1972@qq.com。

        想下载源码的可以到我的资源里去下载,或者点击打开链接进入下载页面。

 














跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码),布布扣,bubuko.com

跟我一起学extjs5(20--模块Grid的其他功能的设想,前20节源码)

标签:extjs5   sencha   开发经验   

原文地址:http://blog.csdn.net/jfok/article/details/37877563

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!