PDA

View Full Version : Issue in adding LISTENER to carousel element(can't access items within the carousel)



deepaknair.g
7 Nov 2011, 9:41 PM
Hi,
I have a tab panel as parent.Inside that I have two panels.In one of that panel,I have a carousel and a list.
I have to add listeners to the carousel by making object to refer the items within the carousel . Let me show the code of my carousel. Hopefully awaiting your reply.


Ext.define('Sencha.view.Article', { extend: 'Ext.Carousel',
xtype: 'articlespage',

layout: 'card',
cardSwitchAnimation: 'fade',
config: {
title: 'Articles',
iconCls: 'star',
height: 400,

items: [
{
html:"some html text and image here",
style: 'background-color:#110310;',
ui:'light'


},


{
html:"some html text and image here",
style: 'background-color:#110310;',
ui:'light'


}


],
listeners:
{
// Here I couldn't get access to the object of carousel.I couldn't use "this" or "xtype" here.//

}

}
});

AndreaCammarata
8 Nov 2011, 1:15 AM
Hi.
What kind of listener you would like to refer to a carousel child?
I mean, when you switch between a card to another one, when you tap on a card, etc..
Are you using MVC pattern?

deepaknair.g
8 Nov 2011, 1:39 AM
Hi,
I am using the MVC pattern.I want to add listeners on both,while switching the cards (for enable autosliding) as well as tapping the item..But
whenever I use 'this' or 'xtype' and calls a function,an error is occurred..Can you help me? Thanks in advance

deepaknair.g
8 Nov 2011, 2:06 AM
I found some difficulties while dealing with the ST2 MVC.One problem is that,I can't define a function inside listeners as "afterRender". Even 'console.log' or 'alert' is not working if it is put inside a function definition.

listeners: { afterRender:function()
{console.log('hello')}
}

Even this does not work.Is there any other way to define afterRender?:-/

mitchellsimoens
8 Nov 2011, 10:16 AM
To access the correct scope, you need to specify the listener within a method:


constructor: function(config) {
Ext.apply(this.listeners, {
event : function
});

this.callParent(arguments);
}

deepaknair.g
8 Nov 2011, 11:06 PM
Hi,
It didn't work.Can you give some explanations for your code.I couldn't understand it properly.Should I specify the event as "function",or should I mention "afterRender" or "painted" instead of "function".Let me send you my updated code.Can you mention the changes I have to make?




Ext.define('Sencha.view.Article', {
extend: 'Ext.Carousel',
alias: 'widget.articlespage',
constructor: function(config) {
Ext.apply(this.listeners, {
event : afterRender
});


this.callParent(arguments);
},


config: {
title: 'Articles',
iconCls: 'star',
height: 400,


items: [
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 1</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/art.jpg' border='0'/></div></div>",
style: 'background-color:#110310;',
ui:'light'


},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 2</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/mn1.jpg' border='0'/></div></div>",
style: 'background-color:#110310;',
ui:'light'



},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 3</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/wtc.jpg' border='0'/></div></div>",
style: 'background-color:#110310;',
ui:'light'




},
{
html:"<div style='float:left;width:100%;'><div style='float:left;width:50%;margin-top:30px;'><h1>Title - 4</h1>Built with HTML5 Canvas, Touch Charts includes gesture-based <a href='#'>Read More >></a></div><div style='float:left;width:50%;'><img src='resources/images/kp.jpg' border='0'/></div></div>",
style: 'background-color:#110310;',
ui:'light'




},



],



listeners:
{ afterRender:function()
{console.log('hello')}
}

}

});




Hopefully waiting for your answer....:-/

rdougan
22 Nov 2011, 12:09 AM
You can listen to the painted event.

We generally always pass the component instance as the first argument to all events. This is currently a little inconsistent, but we are trying to improve this in 2.x.

rdougan
22 Nov 2011, 12:12 AM
And to fix your issue, add this method into your definition:


initialize: function() {
this.on({
scope: this,

painted: function() {
console.log('do something');
}
});
}