Learn extjs5 with me (18 -- module addition, modification, and deletion operations), extjs518 --

Learn extjs5 with me (18 -- module addition, modification, and deletion operations), extjs518 --
Learn extjs5 with me (18 -- add, modify, and delete modules)
In the previous section, we made a manual choice for the amount unit during the Grid display. If you want to add other functions, you only need to 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, and the unit are displayed in the title bar or after the amount, anything you need to set manually can be added. The settings mentioned above will be added to the program later, which can be seen in the download package, without further explanation.
This section allows you to add, modify, and delete modules. Because it is not associated with the background service, the data is stored in the local localStorage, and close the data in the browser will not be lost. First, let Grid have the row modification function. Double-click a cell to modify it. Add the following statement to the initComponent function of Grid. js so that Grid can double-click to modify data. If clicksToEdit is set to 1, click Modify.

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

After the preceding settings, double-click the cell modification interface as follows:



Add autoSync: true to the Store attribute, so that data is automatically saved after a cell is modified. To 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);}

You can select one or more data items to delete. Add an event to the delete button in GridToolbar. js.

{Text: 'delete', disabled: true, glyph: 0xf014, itemId: 'deletebattout', handler: 'deleterrecords '}

The deletion button is in the disabled status. After a record is selected, the deletion button changes to enable. You need to add an event to the Grid:

listeners : {selectionChange : 'selectionChange'},

Add the Event Response Function to ModuleController. js:

// SelectionChange: function (model, selected, eOpts) after the selected record changes {// set the deletion button status this. getView (). down ('toolbar button # deletebutton ') [selected. length> 0? 'Enable': 'disable'] ();},

Add the event deletion handler in ModuleController. js:

// Delete one or more deleteRecords: function (button) {var grid = this. getView (). down ('lelegrid'), selection = grid. getSelectionModel (). getSelection (), message = ''; if (selection. length = 1) // if only one message = '+ selection [0] is selected. getNameValue () +? '; Else {// multiple record message =' <ol> '; Ext. array. each (grid. getSelectionModel (). getSelection (), function (record) {message + = '<li>' + record. getNameValue () + '</li>';}); message + = '</ol>'; message = 'lower' + selection. length + 'record? '+ Message;} Ext. messageBox. confirm ('Confirm delete', 'Confirm to delete <strong> '+ this. getView (). getViewModel (). in get ('tf _ title') + '</strong>,' + message, function (btn) {if (btn = 'yes') {grid. getStore (). remove (grid. getSelectionModel (). getSelection (); grid. getStore (). sync ();}})},

To be able to select multiple records, you need to add a multiSelect: true attribute to the Grid, so that you can press Ctrl and shift to select multiple records with the mouse. Next let's take a look at the prompt information before deleting one record and multiple records. Delete a prompt message:

Delete multiple prompts: