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"> </div>'+
'<div class="cal-cell cell-normal"> </div>'+
'<div class="cal-cell cell-normal"> </div>'+
'</div>'+
'<div class="cal-row">'+
'<div class="cal-cell cell-small">08:00</div>'+
'<div class="cal-cell cell-normal"> </div>'+
'<div class="cal-cell cell-normal"> </div>'+
'<div class="cal-cell cell-normal"> </div>'+
'</div>'+
'<div class="cal-row">'+
'<div class="cal-cell cell-small">09:00</div>'+
'<div class="cal-cell cell-normal"> </div>'+
'<div class="cal-cell cell-normal"> </div>'+
'<div class="cal-cell cell-normal"> </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]);
}
});