PDA

View Full Version : removeListe



PSB
24 Aug 2009, 1:56 PM
hello!

Please help me remove event for grid:



var grid = new Ext.grid.GridPanel({
...............
});

..........other code.............

userManager_userGrid.addListener("rowclick",function(grid,index,e){
..............
});

..........other code.............

userManager_userGrid.removeListener("rowclick", ????? );

:((

Animal
24 Aug 2009, 1:59 PM
Remove the function. Pass THE function.

So you cannot pass a function literal. You must retain a reference to it.

The API docs attempt to really make this clear after some people got confused. The API docs were augmented to really make it CLEAR that you have to pass the same function.

PSB
24 Aug 2009, 2:05 PM
i try this code:



grid.un("rowclick",function(grid,index,e){
.....old function....
});

or

grid.un("rowclick",function(grid,index,e){
.....new function....
});



not work...

Animal
24 Aug 2009, 9:10 PM
For the reasons I explained, and the API docs explain.

You must pass the same function. Not another function which does exactly the same thing

StuartAshworth
25 Aug 2009, 12:15 AM
If i understand Animal correctly he means something like this...



var grid = new Ext.grid.GridPanel({
...............
});

..........other code.............
var myListener = function(grid,index,e){
..............
};

userManager_userGrid.addListener("rowclick", myListener);

..........other code.............

userManager_userGrid.removeListener("rowclick", myListener );

PSB
26 Aug 2009, 8:47 AM
Stoot98 thanks for your answer, but your code not work correctly:

I try your code:



var grid = new Ext.grid.GridPanel({
...............
});

..........other code.............
var myListener = function(grid,index,e){
..............
};

grid.addListener("rowclick", myListener);

..........other code.............

grid.removeListener("rowclick", myListener );


and next, i use new rowclick event for grid:

grid.addListener("rowclick", myListener2);

and after this, grid start two events simultaneous

Animal
26 Aug 2009, 9:28 AM
Stoot's code works correctly.

PSB
26 Aug 2009, 10:26 AM
Stoot's code works correctly.

Yes, correctly, but if after this code add string:


grid.addListener("rowclick", myListener2);

grid use two events, old and new... or am I wrong? Please help!

Animal
26 Aug 2009, 10:42 AM
Add two listeners and both will get called.

PSB
26 Aug 2009, 1:05 PM
Add two listeners and both will get called.

Animal, sorry for my bad English. let me show you my code more clearly to understand what I want:



Grid = new Ext.grid.GridPanel({............})
........other code..............

gridListeners_1 = function(grid,index,e){............}
gridListeners_2 = function(grid,index,e){............}

Tree = new Ext.tree.TreePanel({
............
root:new Ext.tree.AsyncTreeNode({
expanded:true,
children:[{
text:"USERS",
listeners:{
click:function(){
grid.un("rowclick",gridListeners_2);
grid.addListener("rowclick",gridListeners_1);
}
},
leaf:true
},{
text:"RIGHT",
listeners:{
click:function(){
grid.un("rowclick",gridListeners_1);
grid.addListener("rowclick",gridListeners_2);
}
},
leaf:true
}]
})
});

In this code, i need remove first event and run second event. But this code not work - grid summ two event!

Animal
27 Aug 2009, 2:10 AM
What errors do you see in your Firebug console?

PSB
27 Aug 2009, 3:18 AM
no errors. all clear. Grid summ two listeners after work with tree.

Animal
27 Aug 2009, 3:24 AM
Well, it works. Tried and tested and working.

PSB
27 Aug 2009, 3:25 AM
i test this code:



clickOn = function(){alert("dsf");}
clickOn_2 = function(){alert("dsf_2");}

panel = new Ext.Panel({
renderTo:Ext.getBody(),
width:300,
height:300,
items:[{
xtype:"button",
id:"button",
text:"Button_AddEvent"
},{
xtype:"button",
id:"button_2",
text:"Button_AddEvent_2",
handler:function(){
Ext.getCmp("button").un("click",clickOn);
Ext.getCmp("button").addListener("click",clickOn_2);
}
}]
});

Ext.getCmp("button").addListener("click",clickOn);


all work

PSB
27 Aug 2009, 3:56 AM
I found that it was not so:



Ext.getCmp("panel_container").add(add_panel);
Ext.getCmp("panel_container").doLayout();

.........other code...............

if(add_panel.getEl()) add_panel.getEl().remove();
Ext.getCmp("panel_container").doLayout();


after red string, panel_container again shows add_panel. Bug?

Animal
27 Aug 2009, 4:00 AM
No.

PSB
27 Aug 2009, 4:26 AM
Grid = new Ext.grid.GridPanel({............});
........other code..............

gridListeners_1 = function(grid,index,e){............}
gridListeners_2 = function(grid,index,e){............}

Tree = new Ext.tree.TreePanel({
............
root:new Ext.tree.AsyncTreeNode({
expanded:true,
children:[{
text:"USERS",
listeners:{
click:function(){
grid.getEl().remove();
grid.un("rowclick",gridListeners_2);

panel_container.add(grid);
panel_container.doLayout();
grid.addListener("rowclick",gridListeners_1);
}
},
leaf:true
},{
text:"RIGHT",
listeners:{
click:function(){
grid.getEl().remove();
grid.un("rowclick",gridListeners_1);

panel_container.add(grid);
panel_container.doLayout();
grid.addListener("rowclick",gridListeners_2);
}
},
leaf:true
}]
})
});


Then doLayout() restore all the events previously deleted?

Animal
27 Aug 2009, 4:46 AM
You can't just remove Elements!

PSB
27 Aug 2009, 5:36 AM
OK, I understand, that my error is not in the events.

You right. When i remove ext components (Ext.get("...").getEl().remove()) and use doLayout() in container panel - this components render back again!

Please, tell me how remove ext component and use them in the future?

I tried to command destroy() and after the component is no longer render.

Animal
27 Aug 2009, 5:38 AM
So, you want to remove a Component from a Container

Hmmm... I wonder if there might be some documentation?

PSB
27 Aug 2009, 8:00 AM
some documentation?

OK, lets see documentation:

1) command removeAll()

before command - OK:


Ext.getCmp("panel_container").add(grid);

http://img48.imageshack.us/img48/2522/beforey.jpg

after command - OK:


Ext.getCmp("panel_container").removeAll();

http://img81.imageshack.us/img81/8043/afterw.jpg

after re-usable command panel_container.add("grid") - ?:


Ext.getCmp("panel_container").add(grid);

http://img137.imageshack.us/img137/6454/aftererror.jpg


2) command remove() - see 1.
3) command destroy() - grid no longer render