PDA

View Full Version : Where are the component events???



swarnendude
18 Oct 2011, 4:07 AM
Guys,

Can you tell me where are the component events? Like for a Ext.List, there is a "select" event but I cannot see that in the documentation.

Also, how to set a click event on a container body? There is no "afterrender" event present for a container.

Any help?

jay@moduscreate.com
18 Oct 2011, 7:52 AM
In ST1 and Ext4, you could do something like:



{
xtype : 'component',
listeners : {
el : {
tap /* or click */ : function() {
alert('here')
}
}

}
}


But it does not work in Sencha Touch 2. most of the component lifecycle events have been removed.

As far as Ext.List, the events like itemtap, select are fired. They are also documented.

dschano
18 Oct 2011, 7:59 AM
They are also documented.

Please can you tell where. I cant find these events here http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.List
(http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.List)
Thank You

jay@moduscreate.com
18 Oct 2011, 8:08 AM
I apologize. I meant to write "should be documented". I've been so deep into the ST2 source code lately, that I don't look @ the docs much any more.

orinacko
21 Oct 2011, 11:36 AM
In ST1 and Ext4, you could do something like:



{
xtype : 'component',
listeners : {
el : {
tap /* or click */ : function() {
alert('here')
}
}

}
}


But it does not work in Sencha Touch 2. most of the component lifecycle events have been removed.

Is there a replacement in ST2 for setting up gesture listeners on components when defining or creating them? Thanks!

edspencer
22 Oct 2011, 8:08 PM
We missed out a number of @events when updating the docs for 2.0.0, we'll start bringing these back over the next few releases. Sorry about that, I know it's frustrating :/

swarnendude
22 Oct 2011, 10:32 PM
@Ed, thanks for confirming. But can you at least tell us a event like "afterrender"? I tried using "renderedchange" but that gets fired in some specific cases.

arislaw
25 Oct 2011, 8:04 AM
I was trying to find out that too...

DataView events are lost in space :-)

bharatn
25 Oct 2011, 1:11 PM
Try using 'painted' event and see if that helps.

kinetifex
27 Oct 2011, 5:44 PM
Is there a replacement in ST2 for setting up gesture listeners on components when defining or creating them? Thanks!

I too am wondering the same thing? Are these coming back in a future release?

swarnendude
27 Oct 2011, 8:13 PM
Try using 'painted' event and see if that helps.

Thanks bharatn, "painted" event worked for me.

Marc-QNX
21 Nov 2011, 12:52 PM
I too am wondering the same thing? Are these coming back in a future release?

I would like to know this as well... we could really use those.

rdougan
21 Nov 2011, 11:40 PM
I would like to know this as well... we could really use those.

In Sencha Touch 2 you should use the painted event, which means when the component is actually displayed on the screen. There is also an erased event, for when the component is removed from the screen.

There will be no more afterrender event (although it will be deprecated gracefully before GA). This is because the way a component's dom structure is created, and when it has been created, has been drastically changed in 2.0. There essentially is no longer any 'rendering' as the component always exists (so no more checking if this.el is defined).

Marc-QNX
22 Nov 2011, 8:15 AM
Actually I was counting on the 'tap' event becoming available again for containers. Is this something that will be coming back or is there an alternative?

rdougan
22 Nov 2011, 10:25 AM
There is still a tap event on Ext.Component and anything that extends it. You just need to listen for the event on the element, not the component itself.


var container = Ext.create('Ext.Container', {
fullscreen: true.
html: 'Sencha'
});

container.element.on({
scope: this,

tap: function() {
console.log('Tapped on the container element!');
}
});

Marc-QNX
22 Nov 2011, 10:58 AM
In this case, should the following not work as well? I am not getting events this way...


var container = Ext.create('Ext.Container', {
fullscreen: true,
html: 'Sencha',
listeners: {
el: {
tap: function() {
console.log("tap!");
}
}
}
});


edit: I've tried with el and element, with the listeners object in the root and in config with no luck.

rdougan
22 Nov 2011, 11:04 AM
That will not work right now, but it is an open ticket, and will be fixed before GA.

tthai
28 Feb 2012, 1:16 AM
FYI, i don't think this is working as of ST2 RC

No events were fired when tapped.... Can we have someone verify this?



var videoOptions = Ext.create('Ext.Component', { cls: 'video-play-icon',
listeners: {
el: {
tap: function() {
alert('yeahbaby');
}
}
}
});

edspencer
28 Feb 2012, 12:17 PM
Can you try it with element instead?:



var videoOptions = Ext.create('Ext.Component', {
cls: 'video-play-icon',
listeners: {
element: {
tap: function() {
alert('yeahbaby');
}
}
}
});