1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    7
    Vote Rating
    0
    larssin is on a distinguished road

      0  

    Default Answered: itemtap event on items within a DataView itemTpl

    Answered: itemtap event on items within a DataView itemTpl


    Hi,

    I'm building an app where i need to load some data from a store into a custom calendar. I need to attach listeners to event items in the calendar so that the user can click/tap an event and see a new page where he can make some changes. Based on another thread (http://www.sencha.com/forum/showthre...nt-in-DataView) I tried to make the following code where the calendar shows up as expected, but the tapping events do not work. The store uses ajax to load data from a local json file if that makes a difference on the timing. Any ideas why it isn't working?

    Code:
    Ext.define('Settings.view.CalPage', {
      extend: 'Ext.DataView',
        xtype  : 'cal-page',
        
        config: {
    
        styleHtmlContent: true,
        itemTpl:    new Ext.XTemplate('<div id="cal-container">'+
                        '<div class="cal-columns-header">'+
                            '<div class="cal-row">'+
                                    '<div class="cal-cell cell-small">Time</div>'+
                                    '<div class="cal-cell cell-normal">Today</div>'+
                                    '<div class="cal-cell cell-normal">Thursday</div>'+
                                    '<div class="cal-cell cell-normal">Friday</div>'+
                            '</div>'+
                        '</div>'+
                        '<div class="cal-body">'+
                              '<div class="cal-row">'+
                                '<div class="cal-cell cell-small">07:00</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                            '</div>'+
                            '<div class="cal-row">'+
                                '<div class="cal-cell cell-small">08:00</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                            '</div>'+
                            '<div class="cal-row">'+
                                '<div class="cal-cell cell-small">09:00</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                                '<div class="cal-cell cell-normal">&nbsp;</div>'+
                            '</div>'+                
                            '<!-- Event elements -->'+
                            '<div class="cal-event evt-type-work evt1" >{DESCRIPTION}</div>'+ 
                            //'<div class="cal-event evt-type-private evt2">{DESCRIPTION}</div>'+
                            
                    '</div> <!-- cal-body -->'+
                '</div> <!-- cal-container -->'),
        scrollable: true
        },
        
        initialize: function() {
        
        this.on('itemtap', function(view, index, node, e) {
            console.log('itemtap');
            
        }, this);
        },
        
        constructor : function(config) {
        
        Ext.apply(config, {
            store : Ext.create('Settings.store.Store')
        });
    
    
        this.callParent([config]);
        }
    });

  2. In your initialize method, you need to execute the callParent just like you did in the constructor.

    Code:
    initialize : function() {
        this.callParent(arguments);
    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Answers
    3449
    Vote Rating
    818
    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


    In your initialize method, you need to execute the callParent just like you did in the constructor.

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

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    7
    Vote Rating
    0
    larssin is on a distinguished road

      0  

    Default


    Nice, that works. Thanks a lot for the quick reply

Thread Participants: 1

Tags for this Thread