The previous section made a function that amount units can be selected manually during the Grid display. If you want to add other functions, just follow this mode, for example, if you want to change the color of the amount field, the number of decimal places, whether the zero value is displayed, the currency symbol, the unit is displayed in the title bar or followAfter the amount, anything you can think of that needs to be set up manually can be added.These settings mentioned above will be added to the program later. As you can see them in the download package, they will not be explained.

This section enables modules to have additions, modifications, and deletions.Since the data is not yet associated with the back-end service, it is stored in the local store and will not be lost if the browser closes it.First, we'll give the Grid in-line modification capabilities, which can be modified by double-clicking the cell.Add the following statement to the initComponent function in Grid.js so that the Grid can double-click to modify the data.clicksToEdit, if set to 1, clicks Modify.

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

After the above settings, double-click the cell to modify the interface as follows:

    

Add: autoSync: true to the Store property so that when you modify a cell, the data is automatically saved.

The event for the new button is modified below so that it can add a new record.Change the addRecord function in ModuleController.js to the following:

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);
			}

Add data deletion below. Delete can select one or more items to delete.Add events to the Delete button in GridToolbar.js.

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

Add a handler for deleting events in ModeleController.js:

// Delete one or more records
			deleteRecords : function(button) {
				var grid = this.getView().down('modulegrid'), selection = grid
						.getSelectionModel().getSelection(), message = '';
				if (selection.length == 1) // If only one is selected
					message = ' 『' + selection[0].getNameValue() + '』 Are you??';
				else { // Multiple records selected
					message = '<ol>';
					Ext.Array.each(grid.getSelectionModel().getSelection(), function(
									record) {
								message += '<li>' + record.getNameValue() + '</li>';
							});
					message += '</ol>';
					message = 'Following ' + selection.length + ' Is there a record??' + message;
				}
				Ext.MessageBox.confirm('Determine Delete', 'Determine to delete <strong>'
								+ this.getView().getViewModel().get('tf_title')
								+ '</strong> In' + message, function(btn) {
							if (btn == 'yes') {
								grid.getStore().remove(grid.getSelectionModel().getSelection());
								grid.getStore().sync();
							}
						})
			},

In order to be able to select multiple records, you need to add an attribute to the Grid. multiSelect : true This allows you to hold down the Ctrl and shift keys to select records with the mouse.Here's a look at the tips for selecting one record and multiple records before deleting them.

Delete a hint:

Delete multiple prompts: