Learn Extjs5 with me (add, modify, delete 18--module)

Learn Extjs5 with me (add, modify, delete 18--module)
The last section in the grid to do an amount of units can manually select the function, if you want to add other functions, just follow this mode to operate on the line, for example, you want to change the Amount field color, scale, 0 value is displayed, currency symbol, the unit is displayed in the title bar or after the amount of money, Anything you can think of that needs to be set manually can be added in. The above mentioned settings will be added to the program, in the download package can be seen, do not explain.
This section allows the module to have new, modified, deleted operations. Since there is no connection to the background service, the data is saved in the local localstorage, and the browser closes the data without losing it. First we let the grid have inline modification, and double-click the cell to modify it. 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, then click Modify.

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

After setting up, double-click the cell to modify the interface as follows:



add: Autosync:true in the properties of the store so that the data is saved automatically when you finish modifying a cell. The following changes the event of the new button 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);}

The following to add the deletion of data, delete can choose one, you can also select multiple to delete. Add an event to the Delete button in Gridtoolbar.js.

{text: ' delete ', Disabled:true,glyph:0xf014,itemid: ' DeleteButton ', handler: ' Deleterecords '}

The initial state of the Delete button is disabled and will not become enabled until the record is selected, and an event needs to be added to the grid:

Listeners: {selectionchange: ' SelectionChange '},

Add the event response function in Modulecontroller.js:

The selected record has changed after the event selectionchange:function (model, selected, eopts) {//sets the state of the Delete button This.getview (). Down (' toolbar button# DeleteButton ') [selected.length > 0? ' Enable ': ' Disable '] ();},

To add a handler for the Delete event in Modulecontroller.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 message = '" ' + selection[0] is selected. Getnamevalue () + '? '; else {//select more than one record message = ' <ol> '; Ext.Array.each (Grid.getselectionmodel (). GetSelection (), function (record) {message + = ' <li> ' + Record.getnamevalue () + ' </li> ';}); Message + = ' </ol> '; message = ' The following ' + Selection.length + ' record? ' + message;} Ext.MessageBox.confirm (' OK delete ', ' OK to delete <strong> ' + This.getview (). Getviewmodel (). 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 property to the gridMultiSelect:true, so you can press and hold the CTRL and SHIFT keys to use the mouse to make a multi-select record operation. Here's a look at the message that you selected before deleting a record and multiple records. to delete a message:

to delete more than one prompt message: