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

跟我一起学extjs5(18--模块的新增、修改、删除操作)

时间:2014-07-16 17:17:41      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:extjs5   sencha   开发经验   

跟我一起学extjs5(18--模块的新增、修改、删除操作)


        上节在Grid展示时做了一个金额单位可以手工选择的功能,如果你要加入其他功能,也只要按照这个模式来操作就行了,比如说你想改变金额字段的颜色、小数位数、零值是否显示、货币符号、单位显示在标题栏或者跟在金额后面,凡是你能想到的需要手工设置的东西都可以加进来。 上面讲到的这些设置以后会加到程序里,在下载包里可以看到,就不做讲解了。

        这一节来使模块可以具有新增、修改、删除的操作。由于还没有和后台服务相联,因此数据是保存在本地localStorage中的,浏览器关闭这些数据并不会丢失。首先我们让Grid具有行内修改功能,双击单元格可以对其进行修改。在Grid.js中的initComponent函数中加入以下语句使Grid可以双击修改数据。clicksToEdit 如果设置成1,则会是单击修改。

				this.cellEditing = new Ext.grid.plugin.CellEditing({
							clicksToEdit : 2
						});
				this.plugins = [this.cellEditing];
      如上设置后,双击单元格修改界面如下:

bubuko.com,布布扣  bubuko.com,布布扣  bubuko.com,布布扣

        在Store的属性里加入:autoSync : true,这样修改完一个单元格后会自动保存数据。
        下面对新增按钮的事件加以修改,使其可以新增一个记录。将ModuleController.js中的addRecord函数改为以下:
			addRecord : function() {
				var grid = this.getView().down('modulegrid');
				var model = Ext.create(grid.getStore().model);
				model.set('tf_id',0);
        grid.getStore().insert(0, model);
			}

        下面来加入数据的删除,删除可以选择一条,也可以选择多条进行删除。GridToolbar.js中给删除按钮加上事件。
 {
							text : '删除',
							disabled : true,
							glyph : 0xf014,
							itemId : 'deletebutton',
							handler : 'deleteRecords'
						}
        删除按钮初始状态是disabled的,在选中了记录之后才会变成enable,需要在Grid中加入一个事件:
			listeners : {
				selectionChange : 'selectionChange'
			},
        在ModuleController.js中加入事件响应函数:
			// 选中的记录发生变化过后的事件
			selectionChange : function(model, selected, eOpts) {

				// 设置删除按钮的状态
				this.getView().down('toolbar button#deletebutton')[selected.length > 0
						? 'enable'
						: 'disable']();

			},

        在ModuleController.js中加入删除事件的处理函数:
			// 删除一条或多条记录
			deleteRecords : function(button) {
				var grid = this.getView().down('modulegrid'), selection = grid
						.getSelectionModel().getSelection(), message = '';
				if (selection.length == 1) // 如果只选择了一条
					message = ' 『' + selection[0].getNameValue() + '』 吗?';
				else { // 选择了多条记录
					message = '<ol>';
					Ext.Array.each(grid.getSelectionModel().getSelection(), function(
									record) {
								message += '<li>' + record.getNameValue() + '</li>';
							});
					message += '</ol>';
					message = '以下 ' + selection.length + ' 条记录吗?' + message;
				}
				Ext.MessageBox.confirm('确定删除', '确定要删除 <strong>'
								+ this.getView().getViewModel().get('tf_title')
								+ '</strong> 中的' + message, function(btn) {
							if (btn == 'yes') {
								grid.getStore().remove(grid.getSelectionModel().getSelection());
								grid.getStore().sync();
							}
						})
			},

        为了能够多选记录,需要给Grid加上一个属性 multiSelect : true, 这样就可以按住Ctrl 和 shift 键来用鼠标进行多选记录的操作了。下面看看选择了一条记录和多条记录删除前的提示信息。
        删除一条的提示信息:
bubuko.com,布布扣

        删除多条的提示信息:
bubuko.com,布布扣




跟我一起学extjs5(18--模块的新增、修改、删除操作),布布扣,bubuko.com

跟我一起学extjs5(18--模块的新增、修改、删除操作)

标签:extjs5   sencha   开发经验   

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

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