1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    zhaoshixuan is on a distinguished road

      0  

    Default Nested Grid Click event problem

    Nested Grid Click event problem


    test.png
    Dears,
    I saw a good plugin from http://www.sencha.com/forum/showthre...r-in-ExtJS-3.0.
    It is great and I used it in my work.
    But when I select record in the nested grid, the outer grid's record with the same rowIndex will be selected too.
    You can see this situation on the pic.
    When I use editor grid instead of grid panel, an error will happen after I click the first column of the nested grid.
    And some event will be also fired before any click event is fired.
    In the event, the outer cell will be selected and its column index will reduce 1. So, it the first column of nested grid is selected, the outer column index will be -1 and error happens.
    I tested many times and found no clues about the mysterious event.
    Could any one explain it?
    I'm always confused by the event's sequence.
    Beg your help
    PS: I work in ExtJS 3.3
    I found 'mousedown' event is the first fired event.
    After the nested grid, the outer grid will fire this event too. Then it tries to focus the wrong cell.
    How to prevent the outer grid event?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You will need to detect which grid it's clicked on and cancel the click on the main grid if it is suppose to be on the child grid.

    In Ext JS 4, I do this:

    Code:
    outerGrid.on('beforeselect', function(selModel, rec) {
        return !!rec;
    });
    As rec was undefined, I put this in the init and in the destroy I removed the listener.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    zhaoshixuan is on a distinguished road

      0  

    Default


    Maybe it works in ExtJS 4.0 for the grid has 'beforeselect' event.
    But 'beforeselect' event of grid doesn't exist in ExtJS 3.3

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Just giving you an idea
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    zhaoshixuan is on a distinguished road

      0  

    Default


    Thanks for your kindness

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    zhaoshixuan is on a distinguished road

      0  

    Default


    Waiting for help

  7. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    zhaoshixuan is on a distinguished road

      0  

    Default


    In the nested grid, I add listeners
    Code:
    								 cellclick : Ext.createDelegate(function(grid , rowIndex, columnIndex,  e ){									 e.stopPropagation();
    								},this),
    								 mousedown : Ext.createDelegate(function(e){
    									 e.stopPropagation();
    								},this)
    and in the outer grid, I add listeners
    Code:
    								 mousedown : Ext.createDelegate(function(e){									 e.stopPropagation();
    								},this)
    Then, the outer event isn't propagated.
    However, there are still lots of things to do. Any suggestion is welcomed!

  8. #8
    Sencha User
    Join Date
    Jul 2014
    Posts
    1
    Vote Rating
    0
    karoldobo is on a distinguished road

      0  

    Default


    Old problem, but maybe someone looking for solution (extjs 4.2.1).


    Nested grid:
    Code:
    listeners: {
     select: function() { 
      me.stopSelection = true; //some flag XYZ
     }
    },
    Outer grid listener:
    Code:
    'msgatrulesgrid': {
        beforeselect: function(grid, record, item, index, e, eOpts) {
            var textGridPanel = grid.view.up('grid');
            if (textGridPanel.stopSelection) { //same flag XYZ
                textGridPanel.stopSelection = false;
                return false;
            }
        },
        select: function(grid, record, item, index, e, eOpts) {
            //select action
        }
    }

Thread Participants: 2