PDA

View Full Version : Remove listener from grid panel's colum header



nk10ere
24 Sep 2010, 1:29 AM
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:



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.

nk10ere
24 Sep 2010, 4:27 AM
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


store.removeListener('headerclick', store.onHeaderClick, store);


but its not working and i have no clue how far from the solution it is.

troseberry
24 Sep 2010, 5:28 AM
have you tried using the stopEvent method of the EventObject? This typically stops the bubbling up of the events

nk10ere
24 Sep 2010, 6:43 AM
You mean that I can not only remove the specific listener and add it back when I need it?

troseberry
24 Sep 2010, 6:56 AM
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.

nk10ere
24 Sep 2010, 7:07 AM
So,

what is wrong with the following line?



grid.removeListener('headerclick',grid.onHeaderClick,grid);


Except that it doesn' t work of course.

troseberry
24 Sep 2010, 7:14 AM
grid.on('headerclick', function(thisObj, col, e) {
return false; // this will stop the sorting of the column
});

troseberry
24 Sep 2010, 7:22 AM
In the "click" event of your icon you should be able to get a reference to the eventObject of the element


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.

nk10ere
24 Sep 2010, 7:24 AM
Well,

it seems i even need help on that.

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

Thanks for helping.

nk10ere
24 Sep 2010, 7:26 AM
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

nk10ere
24 Sep 2010, 7:35 AM
Man, it worked.

Many many thanks!

troseberry
24 Sep 2010, 7:36 AM
what was the final code solution that you did? Post it here for all to see

nk10ere
24 Sep 2010, 7:53 AM
Well,

the initial requirement was to add an icon inside the header. This icon should link to a file.\

To add the icon i created a template extending the GridView:


var myGridView = Ext.extend(Ext.grid.GridView, {
templates: {
hcell: new Ext.Template(
'<td class="x-grid3-hd x-grid3-cell x-grid3-td-{id} {css}" style="{style}"><div {tooltip} {attr} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">', '<a class="x-grid3-hd-btn" href="#"></a>',
'{value}<img class="x-grid3-sort-icon" src="', Ext.BLANK_IMAGE_URL, '" /><img id="nk-img" class="myicon" src="', Ext.BLANK_IMAGE_URL, '" />',
'</div></td>'
)
}
});
Then I made a function to return this view so I can set it in the GridPanel:


function getView(){
if(!this.view){
this.view = new myGridView();
}
return this.view;
}
in the gridpanel ...


var grid = new Ext.grid.GridPanel({
...
view : getView(),
...
Then, all I needed was to control in which column header the icon should appear and to provide the link for each icon. At the same time I should prevent the Grid from sorting when I hit the icon. This code must go after the grid is rendered.



var els = Ext.DomQuery.select('img[id=nk-img]');

//hide icons where not needed
Ext.fly(els[1]).addClass('x-hidden');
Ext.fly(els[4]).addClass('x-hidden');

//assign links to the icons
Ext.fly(els[0]).on('click', function(eventObj, elRef) {
eventObj.stopEvent(); // This call prevents the grid from sorting at the time when the icon is clicked
window.open('company_info.html', 'windowname1', 'width=200, height=77');
return false;
});
Ext.fly(els[2]).on('click', function(eventObj, elRef) {
eventObj.stopEvent();
window.open('change_info.html', 'windowname1', 'width=200, height=77');
return false;
});
Ext.fly(els[3]).on('click', function(eventObj, elRef) {
eventObj.stopEvent();
window.open('pct_change_info.html', 'windowname1', 'width=200, height=77');
return false;
});


Also, I had to add the new class (for the icon) in the ext-all.css file. Here it goes:


.myicon {
background-image: url(../images/default/window/icon-info.gif);
width:15px;;height:10px;
}