1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default Handle 'click' event with action column

    Handle 'click' event with action column


    Hi guys,

    I need a little help for a matter about action column.
    I have a grid with an action column to manage the deletion of grid rows, the only item in such action column is a delete icon.

    If the user hits the delete icon then an Ajax request is sent to the server, where a PHP script performs the deletion of currently selected row from a MySQL database.
    Everything works fine, but I'd like to add a confirm message box to show when the user hits the delete
    icon.

    At that point, if the user decides to move on (by clicking the 'ok' button below the message) then the selected row will be deleted (as explained above) , otherwise (if the user hits the 'cancel' button below the message) the deletion action is canceled.

    My first idea was typing a code like that (within handler function of delete icon) :

    this.onClick( some proper code here..... )

    but it doesn't work, because the action column doesn't support the 'onClick' event.

    This is the first time I use ExtJS, I'm a really beginner, so every suggestion is wellcome.
    Here's my complete code to define the action column:

    Code:
    {
           xtype: 'actioncolumn',
           width: 50,
           items: [{
                         icon   : '../shared/icons/fam/delete.gif',  
    		     tooltip: 'Delete this branch',
    		     handler: function(grid, rowIndex, colIndex) {
    					var rec = branch_store.getAt(rowIndex);
    					var id = rec.get('id');
    					console.log("Id is: "+id); //debug code
    					Ext.Ajax.request({
    						url: 'delete.php?id='+id+'&item=branch',
    						success: function(response, opts) {
    							    Ext.MessageBox.alert('Success','OK !');
    							    Ext.Function.defer(Ext.MessageBox.hide,1000,Ext.MessageBox);
    							    branch_store.removeAt(rowIndex);
    						},
    						failure: function(response, opts) {
    							     Ext.MessageBox.alert('Failure','an error occurred');
    						}
    					});
    		   }
    		}]
    	}
    Thanks in advance.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this is what you are looking for:

    Code:
    items: [{
        icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
        tooltip: 'Sell stock',
        handler: function(grid, rowIndex, colIndex) {
    
            Ext.Msg.confirm('Sell Stock', 'Do you wish to sell stock?', function (button) {
                if (button == 'yes') {
                    var rec = store.getAt(rowIndex);
                    alert("Sell " + rec.get('company'));
                    
                }
            }, this);
    
        }
    }
    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    0
    Enrico.Massone is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    See if this is what you are looking for:

    Code:
    items: [{
        icon   : '../shared/icons/fam/delete.gif',  // Use a URL in the icon config
        tooltip: 'Sell stock',
        handler: function(grid, rowIndex, colIndex) {
    
            Ext.Msg.confirm('Sell Stock', 'Do you wish to sell stock?', function (button) {
                if (button == 'yes') {
                    var rec = store.getAt(rowIndex);
                    alert("Sell " + rec.get('company'));
                    
                }
            }, this);
    
        }
    }
    Regards,
    Scott.
    Thanks Scott, actually there was a conceptual error in my question, becouse the tool to handle the click event of delete icon is the handler function.
    I need to handle the event raised by user, when he hits a button in the confirm message box.
    Thank you very much.
    Regards.

Thread Participants: 1