1. #1
    Sencha User chuckoh's Avatar
    Join Date
    Jan 2012
    Location
    Seoul, Korea
    Posts
    16
    Answers
    1
    Vote Rating
    0
    chuckoh is on a distinguished road

      0  

    Default Answered: Pls help me to catch Event on List

    Answered: Pls help me to catch Event on List


    I'm trying to catch tap event on the list elements generated on the fly with Xtemplate. the following example works.

    Controller

    Code:
    
    Ext.define('App.controller.CommentControl', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                commentList: 'comment-list',
                tabPanel: 'tab-panel'
            },
            control: {
                commentList: {
                    tap: 'doListTap'
                }
            }
        },
        doListTap: function(component, activeItem, event, target) {
            console.log('list tapped - *** THIS IS WHAT I NEEDED! ***');
        },
        :
        :
    View

    Code:
    
    Ext.define('App.view.CommentCard', {
        extend: 'Ext.List',
        xtype: 'comment-list',
        config: {
            layout: 'fit',
            store: 'Comments',
            cls: 'clist',
            itemTpl: commentTemplate
        },
        initialize: function() {
            var me = this;
            me.element.on ({
                scope: me,
                tap: function (e, t) {
                    me.fireEvent('tap', me, me.getActiveItem(), e, t);
                }
            });
            me.callParent(arguments);
        }
    });
    HOWEVER, after I changed the view in the following way, it doesn't work. Can anyone point out what I've done wrong. To me its scope related problem though.

    Controller

    Code:
    Ext.define('App.controller.CommentControl', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                commentList: 'comment-card list',
                tabPanel: 'tab-panel'
            },
            control: {
                commentList: {
                    tap: 'doListTap'
                }
            }
        },
        doListTap: function(component, activeItem, event, target) {
            console.log('list tapped - *** THIS IS WHAT I NEEDED! ***');
        },
        :
        :
    VIEW (PUT Ext.List inside of a Panel to have a NavBar)

    Code:
    Ext.define('App.view.CommentCard', {
        extend: 'Ext.Panel',
        xtype: 'comment-card',
        config: {
            layout: 'fit',
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                title: 'Comment',
            },
            {
                xtype: 'list',
                id: 'comment-list',
                store: 'Comments',
                cls: 'clist',
                itemTpl: commentTemplate,
            }]
        },
        initialize: function() {
            var me = this;
            me.element.on ({
                scope: me,
                tap: function (e, t) {
                    me.fireEvent('tap', me, me.getActiveItem(), e, t);
                }
            });
            me.callParent(arguments);
        }
    });
    Thank you for looking.

  2. ahh i just figured out. yay. some coffee and fresh air helped me write correct codes

    on the view

    Code:
      
    :
    :
        initialize: function() {
            var me = this.query('list')[0];
            me.element.on ({
                scope: me,
                tap: function (e, t) {
                    me.fireEvent('tap', me, me.getActiveItem(), e, t);
                }
            });
    
            me.callParent(arguments);
        }

  3. #2
    Sencha User chuckoh's Avatar
    Join Date
    Jan 2012
    Location
    Seoul, Korea
    Posts
    16
    Answers
    1
    Vote Rating
    0
    chuckoh is on a distinguished road

      0  

    Default


    ahh i just figured out. yay. some coffee and fresh air helped me write correct codes

    on the view

    Code:
      
    :
    :
        initialize: function() {
            var me = this.query('list')[0];
            me.element.on ({
                scope: me,
                tap: function (e, t) {
                    me.fireEvent('tap', me, me.getActiveItem(), e, t);
                }
            });
    
            me.callParent(arguments);
        }

Tags for this Thread