1. #1
    Ext User
    Join Date
    Sep 2010
    Posts
    21
    Vote Rating
    0
    nk10ere is on a distinguished road

      0  

    Default Remove listener from grid panel's colum header

    Remove listener from grid panel's colum header


    Hi,

    I have added icons with links after the column names in my grid panel. But when I click the icon not only my link opens: At the same time, the grid is sorted by the column which's icon i clicked. I would like to remove that functionality during my icon's onClick event and restore it after it (after my link opens).

    Could someone help me on that?
    The code I use to add the links to the icons is the following:

    Code:
        var els = Ext.DomQuery.select('img[id=nk-img]');  
        //removeListener('nk-img','headermousedown','headermousedown',this);
        Ext.fly(els[0]).on('click', function() {window.open('company_info.html', 'windowname1', 'width=200, height=77'); return false;});
        Ext.fly(els[1]).addClass('x-hidden');
        Ext.fly(els[2]).on('click', function() {window.open('change_info.html', 'windowname1', 'width=200, height=77'); return false;});
        Ext.fly(els[3]).on('click', function() {window.open('pct_change_info.html', 'windowname1', 'width=200, height=77'); return false;});
        Ext.fly(els[4]).addClass('x-hidden');
    The comment in the code is a test to see if i can remove the listener from the icon and it worked. But what i want is to remove the listener from the column header. If it worked the same way which id should i use then?

    Thanks.

  2. #2
    Ext User
    Join Date
    Sep 2010
    Posts
    21
    Vote Rating
    0
    nk10ere is on a distinguished road

      0  

    Default


    Well,

    so far I have almost solved it.

    I have used store.purgeListeners() to remove all listeners from the datastore and it works.
    The problem is I want to restore the listeners now but the documentation is not helpfull on that.

    I only need an example of how to use the addListener and removeListener methods for my purpose.

    Can please someone throw two examples here?

    My guess was
    Code:
    store.removeListener('headerclick', store.onHeaderClick, store);
    but its not working and i have no clue how far from the solution it is.

  3. #3
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277
    Vote Rating
    9
    troseberry will become famous soon enough

      0  

    Default


    have you tried using the stopEvent method of the EventObject? This typically stops the bubbling up of the events

  4. #4
    Ext User
    Join Date
    Sep 2010
    Posts
    21
    Vote Rating
    0
    nk10ere is on a distinguished road

      0  

    Default


    You mean that I can not only remove the specific listener and add it back when I need it?

  5. #5
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277
    Vote Rating
    9
    troseberry will become famous soon enough

      0  

    Default


    you could call the removeListener method and the addListener method but why not just logically stop the event? instead of trying to remove and add a listener? One step instead of 2?

    btw.. the "headerclick" listener is attached to the grid not the store as you tried in your above example.

  6. #6
    Ext User
    Join Date
    Sep 2010
    Posts
    21
    Vote Rating
    0
    nk10ere is on a distinguished road

      0  

    Default


    So,

    what is wrong with the following line?

    Code:
    grid.removeListener('headerclick',grid.onHeaderClick,grid);
    Except that it doesn' t work of course.

  7. #7
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277
    Vote Rating
    9
    troseberry will become famous soon enough

      0  

    Default


    Code:
    grid.on('headerclick', function(thisObj, col, e) {
        return false; // this will stop the sorting of the column
    });

  8. #8
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277
    Vote Rating
    9
    troseberry will become famous soon enough

      0  

    Default


    In the "click" event of your icon you should be able to get a reference to the eventObject of the element
    Code:
    Ext.fly(els[0]).on('click', function(eventObj, elRef) {
        eventObj.stopEvent();
        window.open('company_info.html', 'windowname1', 'width=200, height=77'); 
        return false;
    });
    see if that does anything.

  9. #9
    Ext User
    Join Date
    Sep 2010
    Posts
    21
    Vote Rating
    0
    nk10ere is on a distinguished road

      0  

    Default


    Well,

    it seems i even need help on that.

    What should i give it for thisObj, col and e?

    Thanks for helping.

  10. #10
    Ext User
    Join Date
    Sep 2010
    Posts
    21
    Vote Rating
    0
    nk10ere is on a distinguished road

      0  

    Default


    I m not sure i know how to get a reference to the event object from there. I have typed all my code inside the html. i have not modified the ext-all.js at all

Similar Threads

  1. [FIXED-145] remove event listener from panel failed
    By su27 in forum Sencha Touch 1.x: Bugs
    Replies: 4
    Last Post: 28 Jul 2010, 12:19 PM
  2. How to remove Group Header from Group Summary Grid Panel?
    By msuresh in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 28 Jan 2010, 1:42 AM
  3. Colum model header wrap
    By simon in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 7 Jul 2009, 7:11 AM
  4. how to remove header from panel using CSS
    By kondurucs in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 13 Feb 2009, 8:33 AM
  5. Making Grid header be a colum instead of a row?
    By RyanZec in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 29 May 2008, 2:23 PM

Thread Participants: 1