Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: How to use viewController as handler for grid action column item

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    140
    Answers
    6

    Default Answered: How to use viewController as handler for grid action column item

    Hi!

    Well, the whole question is already in the thread title.
    How can we use a viewController as a handler for the action columns in a grid?
    As we cannot add a function name as string, that would be automatically bound to the view controller, do we really need to fire events for each action item? Or is there a way that didn't occur to me yet?

    Thank you!

  2. nehatodds answer is very good, but I found a solution, that is more Architect-Style :-)

    You have the 'Process Config' option on *every* component, even on the ActionColumnItem. So, you can add a processConfig for the actionColumnItem and add a handler method string, that is automatically bound to an existing function on the ViewController. Sound complicated, it isn't!!

    This is the part Architect creates when pressing the "Process Config" + icon:
    Code:
    {
        xtype: 'actioncolumn',
        width: 22,
        items: [
            me.processRemoveActionItem({
            icon: 'resources/Assets/Icons/row_delete.png'
        })
    ]
    }
    This is the 'processRemoveActionItem' function. Just do additional config stuff and add a handler function name:
    Code:
    processRemoveActionItem: function(config) {
         
            config.handler = 'removeIconClick';
    
    
            return config;
        },
    Simply add a 'removeIconClick' function to the ViewController:
    Code:
    removeIconClick: function(view, rowIndex, colIndex, item, e, record, row) {
        this.getViewModel().getStore('valueStore').remove(record);
    },
    The handler function is automatically bound and called, when clicked on the action icon in the grid.

    Works like a charm! :-)

  3. #2
    Sencha User
    Join Date
    Mar 2013
    Posts
    47
    Answers
    3

    Default

    This might help. Check out the evant's code sample on this page -
    http://www.sencha.com/forum/showthre...istening/page3

  4. #3
    Sencha User
    Join Date
    Aug 2014
    Posts
    6

    Default

    This way, however, would be the best one.


    this.control({ 'mygrid actioncolumn button[type=edit]' : this.onEdit

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    140
    Answers
    6

    Default

    nehatodds answer is very good, but I found a solution, that is more Architect-Style :-)

    You have the 'Process Config' option on *every* component, even on the ActionColumnItem. So, you can add a processConfig for the actionColumnItem and add a handler method string, that is automatically bound to an existing function on the ViewController. Sound complicated, it isn't!!

    This is the part Architect creates when pressing the "Process Config" + icon:
    Code:
    {
        xtype: 'actioncolumn',
        width: 22,
        items: [
            me.processRemoveActionItem({
            icon: 'resources/Assets/Icons/row_delete.png'
        })
    ]
    }
    This is the 'processRemoveActionItem' function. Just do additional config stuff and add a handler function name:
    Code:
    processRemoveActionItem: function(config) {
         
            config.handler = 'removeIconClick';
    
    
            return config;
        },
    Simply add a 'removeIconClick' function to the ViewController:
    Code:
    removeIconClick: function(view, rowIndex, colIndex, item, e, record, row) {
        this.getViewModel().getStore('valueStore').remove(record);
    },
    The handler function is automatically bound and called, when clicked on the action icon in the grid.

    Works like a charm! :-)
    Last edited by andreas-spindler; 11 Mar 2015 at 11:09 PM. Reason: Removed custom code.

  6. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    47
    Answers
    3

    Default

    @nehatodd
    This is the MVC architecture that we also currently use in our ExtJS 4 application.

    @andreas-spindler
    Thanks for sharing your code. The way you are doing, I guess you can add only assign one handler for the component. Lets say in any case if you needed multiple handlers, can you assign multiple handlers?

  7. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    140
    Answers
    6

    Default

    Of course you can. As I said, you can apply a "Process Config" to every single component visible in SA 3.1 (!). If you have 4 actionItems in the action column, just apply a process config to each of them.

  8. #7
    Sencha Premium Member
    Join Date
    Oct 2013
    Posts
    46
    Answers
    3

    Default

    Thanks so much for this, it can be tricky learning to convert over to extjs5!

  9. #8
    Sencha User
    Join Date
    Aug 2012
    Posts
    140
    Answers
    6

    Default

    @mattkim: Don't hesitate to upvote my answer, if it was helpful to you! ;-)

  10. #9
    Sencha User
    Join Date
    Aug 2012
    Posts
    140
    Answers
    6

    Default

    Really? A down-vote for jokingly reminding someone to up-vote a helpful answer?

  11. #10
    Sencha User
    Join Date
    May 2009
    Posts
    42
    Answers
    6

    Default

    Sorry to bring up 'old stuff' I tried this step by step several times and always ending up with the attached error:
    Untitled.jpg
    Untitled2.jpg
    I did need to comment out
    Code:
     //config.tooltip = Ux.locale.Manager.get('buttons.remove','Remove Name');
    because I kept getting Ux is undefined. Your help is appreciated as this is the only example I could find of an Column Action and I thank your for it.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •