PDA

View Full Version : activate evetn wont fire (see details in post)



gkatz
14 Apr 2011, 1:13 AM
Hi;
code below has a carousel with 3 panels inside it. each panel listens to certain events including 'activate'.
when the app first loads, the activate event is fired on the first panel (also, if you swipe to other panels in the carousel the activate will fire for the others also one by one - as expected).

now, when the refresh button is pressed, the 3 panels are removed from the carousel and destroyed and other new 3 panels are added programatically. however, for the first panel that is displayed (html=4) the activate event is not fired (if you swipe to other panels the activate will fire as before)

I am not sure if this is as intended but its certainly an inconsistent behavior which impacts my coding in lots of places of my app (the code here is a simplified version of the problem i am facing).
thanks.

here is an online demo of the problem: http://69.89.14.45:8080/mobile/testActive.html




Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
new Ext.Panel({
fullscreen: true,
style: 'background-color:#151515;',
layout: 'fit',
items: [{
xtype: 'carousel',
id:'carsl',
indicator: true,
defaults:{
listeners: {
show: function(comp){
alert('show');
},
activate: function(comp){
alert('activate');
},
enable: function(comp){
alert('enable');
}
}
},
items: [
{style: 'background-color:red;',html:'1'},
{style: 'background-color:green;',html:'2'},
{style: 'background-color:gray;',html:'3'}
],
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Test',
items: [
{
xtype: 'button',
iconMask: true,
iconCls:'refresh',
handler: function(){
var carousel = Ext.getCmp('carsl');
carousel.removeAll(true);
carousel.add({style: 'background-color:red;',html:'4'});
carousel.add({style: 'background-color:green;',html:'5'});
carousel.add({style: 'background-color:gray;',html:'6'});
carousel.doLayout();
}
}
]
}],
});

}
});

mitchellsimoens
14 Apr 2011, 6:37 AM
Please wrap your code in the CODE tags. It's hard to read that and understand it.

Each item of the Carousel fires the activate event, not the actual Carousel (unless it's a child of a CardLayout Component). The Carousel does fire a cardswitch event when it's child items switch.

gkatz
14 Apr 2011, 6:42 AM
wrapped it in code tags.
the events are for the carousel childs not the carousel (use of defaults attr...)
hopefully my problem is more readable now :)
thanks

mitchellsimoens
14 Apr 2011, 6:49 AM
You are overnesting. Carousel extends Panel so you don't need to wrap the Carousel inside the Panel.

If you are going to have an activate and deactivate event on each item then there is an opportunity to abstract that behavior. Use the cardswitch event on the Carousel to handle all the activate/deactivate events in one.

If you don't want to do that (not sure why not) then have you tried putting the listeners on the actual item to see if that works for you?

gkatz
14 Apr 2011, 6:57 AM
regarding the overnesting, like I stated, the code is a stripped down version of a problem I have in several cases. the outer panel might be redandent but it does not change the essence of the problem.
regarding the placement of the listeners, I have tried putting the listeners on the items and the behavior was the same so I put it in the defauls for readability...

mitchellsimoens
14 Apr 2011, 7:02 AM
You don't need to copy that much code, all you had to post is your Carousel.

Anyway, tested the listener in the defaults object and the events fire for me.

Working code:


new Ext.Carousel({
fullscreen : true,
defaults : {
listeners : {
activate : function() {
console.log('activate');
}
}
},
items: [
{ html : 'One' },
{ html : 'Two' },
{ html : 'Three' }
]
});

mitchellsimoens
14 Apr 2011, 7:03 AM
This also worked:


new Ext.Panel({
fullscreen : true,
layout : 'fit',
items : {
xtype : 'carousel',
defaults : {
listeners : {
activate : function() {
console.log('activate');
}
}
},
items: [
{ html : 'One' },
{ html : 'Two' },
{ html : 'Three' }
]
}
});

gkatz
17 Apr 2011, 2:50 AM
mitchel please read my post.
my problem is that the activate will not fire for the items I add programatically (after you press and refresh button - see my example code). this is an inconsistent behavior that in my opinion should be dealt with.
thanks.

mitchellsimoens
17 Apr 2011, 4:43 PM
That would tell me that the defaults are not being placed on the added components. Easy fix, add listeners when you add.

gkatz
17 Apr 2011, 9:28 PM
i did and its not working...
panels 5 and 6 that are not visible at first after I add them will fire the activate when displayed.
the problem is with the first one (panel 4, which is the first one to be displayed)
thanks

gkatz
1 May 2011, 10:59 PM
Hi mitchel;
so is this a bug?

mitchellsimoens
2 May 2011, 5:01 AM
The Panel that I add programmatically fired the activate event listener.


var car = new Ext.Carousel({
fullscreen : true,
defaults : {
listeners : {
activate: function() {
console.log('activate');
}
}
},
items : [
{ xtype : 'panel', html : 'One' },
{ xtype : 'panel', html : 'Two' },
{ xtype : 'panel', html : 'Three' }
]
});

setTimeout(function() {
console.log('adding');
car.add({ xtype : 'panel', html : 'Four' });
car.doLayout();
}, 2000);

I tried scrolling through some before the 2 seconds was added and worked 100% for me.

gkatz
2 May 2011, 6:07 AM
Hi;
your code does work but the use case is not similar to mine.
I have supplied a working example that demonstrate this (http://69.89.14.45:8080/mobile/testActive.html) plus code so I dont really know how to proceed. If the sencha team does not want to open a bug on this then so be it but there clearly is some kind of problem.
thanks anyway.

mitchellsimoens
2 May 2011, 6:13 AM
Went to the URL you provided and I got an alert every time I swiped so that's good. I pressed the 'refresh' button and got an alert right away and for every swipe.

I went back to your code that you posted and added a new item and it is working for me. Then I thought, I'm using Chrome 11. Does this not work on a device?


var p = new Ext.Panel({
fullscreen : true,
layout : 'fit',
items : {
xtype : 'carousel',
defaults : {
listeners : {
activate : function() {
console.log('activate');
}
}
},
items: [
{ html : 'One' },
{ html : 'Two' },
{ html : 'Three' }
]
}
});

var car = p.down('carousel');
car.add({ html : 'Four' });
car.doLayout();

gkatz
2 May 2011, 6:22 AM
ok this is strange. my code does not work on safari 5.0.5/chrome 11.0.696.60 and Iphone3GS with IOS 4.3 so i think its fair to say it does not work.
let me tell you exactly what I do:
1. go to url - this will promt 1 alert (for panel 1 which is the first to be displayed)
2. press ok...
3. press refresh button. a senond prompt should pop (for panel 4 which is now displayed) but it doesnt! thats all...

of course, If i start swiping card all the other ones will fire the event. but the use case I mentioned does not fire the event after the refresh.

mitchellsimoens
2 May 2011, 6:28 AM
Ok, now I see what you are talking about. Took 43 years but we got on the same page now :D

I will try to debug what's going on but it does look to be a bug at first glance.

gkatz
2 May 2011, 6:31 AM
thanks!

gkatz
18 May 2011, 2:31 AM
Is there a chance someone can help me or point me to where I need to look to pinpoint this in the sencha source code?.
unfortubatly this is dificult for me to debug (i am no JS expert) and my app relies heavily on component lifecycle so I really need this (in fact i was able to bypass all my other problems and I have been stuck on this for a while)
thanks so much for your help.