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

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

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

        这一节来使模块能够具有新增、改动、删除的操作。

因为还没有和后台服务相联，因此数据是保存在本地localStorage中的，浏览器关闭这些数据并不会丢失。首先我们让Grid具有行内改动功能，双击单元格能够对其进行改动。在Grid.js中的initComponent函数中增加下面语句使Grid能够双击改动数据。clicksToEdit 假设设置成1,则会是单击改动。

				this.cellEditing = new Ext.grid.plugin.CellEditing({
							clicksToEdit : 2
						});
				this.plugins = [this.cellEditing];

如上设置后。双击单元格改动界面例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">    

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

        在Store的属性里增加:autoSync : true,这样改动完一个单元格后会自己主动保存数据。

        以下对新增button的事件加以改动，使其能够新增一个记录。将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中给删除button加上事件。

 {
							text : '删除',
							disabled : true,
							glyph : 0xf014,
							itemId : 'deletebutton',
							handler : 'deleteRecords'
						}

        删除button初始状态是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 键来用鼠标进行多选记录的操作了。以下看看选择了一条记录和多条记录删除前的提示信息。

        删除一条的提示信息：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

        删除多条的提示信息：