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

[deepaknair.g]

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]

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]

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]

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]

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]

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]

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]

And to fix your issue, add this method into your definition:

initialize: function() {
    this.on({
        scope: this,
        
        painted: function() {
            console.log('do something');
        }
    });
}