1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    24
    Vote Rating
    0
    deepaknair.g is on a distinguished road

      0  

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

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


    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.
    Code:
    
    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.// 
    
    }
    
    }
    });
    

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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?
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    24
    Vote Rating
    0
    deepaknair.g is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    24
    Vote Rating
    0
    deepaknair.g is on a distinguished road

      0  

    Default


    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.
    Code:
      
    listeners:            {  afterRender:function()
                   {console.log('hello')}
                 }
    Even this does not work.Is there any other way to define afterRender?

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    To access the correct scope, you need to specify the listener within a method:

    Code:
    constructor: function(config) {
        Ext.apply(this.listeners, {
            event : function
        });
    
        this.callParent(arguments);
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    24
    Vote Rating
    0
    deepaknair.g is on a distinguished road

      0  

    Default


    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?



    Code:
      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....



  7. #7
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  8. #8
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


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

    Code:
    initialize: function() {
        this.on({
            scope: this,
            
            painted: function() {
                console.log('do something');
            }
        });
    }
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.