Results 1 to 4 of 4

Thread: How to listen for itemtap on custom components - Ext.Container?

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19
    Vote Rating
    22
      0  

    Default How to listen for itemtap on custom components - Ext.Container?

    Hi,

    How would I go about adding tap/click listeners for generated items that are Ext.Containers? They are created in my onCarouselPainted function so they are child items of an Ext.Carousel (if you can imagine an MVC-based multi item carousel). Here is an item from the store (there are about 12 images. Here's 1):


    Code:
     config: {
            data: [
                {
                    page: 1,
                    index: 1,
                    title: '1.jpg',
                    image: 'http://www.blah.com/touch/tc/resources/img/1.jpg',
                    action: 'tap'
                },


    I have an action property for each item, but I guess I could just as easily use the unique index number that I have as a reference for each thumbnail, but I'm not sure how to 'catch' or even listen for this, as the generated items are Ext.Components and the index and other info is stored as data in the store.

    I've got it working with a list no problem with something like this, as the list has a built-in .on for the items:

    Code:
    contactList.on("itemtap",function(dataView,index,item,e){
    var first_name = dataView.store.getAt(index).data.firstName;
    var last_name = dataView.store.getAt(index).data.lastName;
    });


    The question is, how would I go about listening for the index number for a custom component in Sencha?

    I've tried and am reasonably familiar with refs and actions and I've used these in the past but I'm not sure I can use these in this particular case.

    Thanks

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
      0  

    Default

    Code:
    {
        listeners:{
            tap:{
                element:'element',
                fn:function(){
                    console.info('tap');
                    console.info('itemIndex:'+this.getParent().getInnerItems().indexOf(this));
                }
            }
        }
    }
    I write English by translator.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Answers
    19
    Vote Rating
    22
      0  

    Default Thanks

    Thanks for the reply....it doesn't seem to work for me. I don't get any messages in the console - strange.

    I tried this too:

    Code:
    Ext.define('MyApp.view.TwopageCarousel', {
        extend: 'Ext.carousel.Carousel',
        alias: 'widget.carousel',
    
    
        config: {
            id: 'Carousel',
            listeners: [
                {
                    fn: 'onCarouselPainted',
                    event: 'painted'
                },
                {
                    fn: 'function',
                    element: 'element',
                    event: 'tap',
                    delegate: 'element'
                }
            ]
        },
    
    
    ...etc
    
    function: function(container) {
            console.log('tap');
            console.log('itemIndex:'+this.getParent().getInnerItems().indexOf(this));
        }

    But I get nothing in the console. I think maybe the problem is I am using parameter 'container'?

    I am not sure I understand the delegate and element parts.

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Location
    China
    Posts
    227
    Answers
    64
    Vote Rating
    20
      0  

    Default

    The op said you want to add listener to component in carousel,so my post is for the item in carousel,not the carousel itself.
    Here is listener for carousel:
    Code:
    listeners:[
                {
                    fn: function(){
                         console.info('carousel paint');
                    },
                    event: 'painted'
                },
                {
                    fn: function(){
                         var index=this.getActiveIndex();
                         var tapedItem = this.getActiveItem();
                         console.info(index);
                    },
                    element: 'innerElement',
                    event: 'tap'
                
                }
            ]
    I write English by translator.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •