Sencha Touch 2.2.1 Carousel not inizialized - sencha-touch-2

Question

I'm back on the project of catalogue viewer app, and after updating to the last sencha release, I have the same problem I had a couple of month ago...the carousel don't recognize the onTap event or, it won't load correctly.
The app is quite simple, the structure is the following:
company name
list of catalogues
detailcard with the catalogue pages (3 per row)
carousel starting from the page tapped
The fact that when I use the app NOT compiled with sencha cmd, it work very smoothly, and problemless, but when I build the app (also production and packaging) with sencha cmd, it won't work.
The dataview show all the image, and when I click one of them, it pop-up the carousel, but empty. I tried to debug, and it won't do the initialize, but why only in the build version?
The code that I use is the following:
Ext.define('CIAM_app.view.Cataloghi', {
extend: 'Ext.NestedList',
xtype: 'cataloghi',
requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
fullscreen: true,
config: {
iconCls: 'doc',
iconMask: true,
title: 'Cataloghi',
styleHtmlContent: true,
store: 'lista_cataloghiStore',
variableHeights: true,
listConfig: {
itemTpl: '<tpl if="leaf == false"><img src="{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>',
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var detailCard = nestedList.getDetailCard();
var pagina = record.get('immagini_catalogo');
var n = record.get('pagine_catalogo');
items = [];
if (detailCard.getData() != null) {
detailCard.getStore().removeAll(true, true);
}
for (i = 1; i <= n; i++) {
items.push({
src: 'gallery/' + pagina + '/' + i + '.jpg',
});
}
detailCard.setData(items);
detailCard.refresh();
},
},
detailCard: {
xtype: 'dataview',
itemTpl: '<img src="{src}">',
cls: 'immagine_catalogo',
listeners: {
itemtap: function(dataView, index, target, record, e, eOpts) {
Ext.Viewport.add({
xtype: 'carousel',
extend: 'Ext.Carousel',
defaultType: 'image',
initialize: function() {
this.setItems(dataView.getData());
this.setActiveItem(index);
this.callParent();
this.element.on('tap', this.onTap, this);
},
onTap: function(e, t) {
this.fireEvent('tap', this, e, t);
this.hide();
},
style: {
'background': 'rgba(206,203,203,0.87)'
},
indicator: false,
width: '100%',
height: '100%',
centered: true,
fullscreen: true,
modal: true,
hideOnMaskTap: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
},
}).show();
}
}
}
}
});
If you want to see the webapp, here's the link: http://www.ciamcostruzioni.it/CIAM_app/not_compiled/
Thanks in advance.

Answer 1

I have made some changes in your code. Check it:
http://jsfiddle.net/JCarlesVilaseca/NZj3N/
Ext.define('CIAM_app.view.Cataloghi', {
extend: 'Ext.NestedList',
xtype: 'cataloghi',
requires: ['Ext.data.TreeStore', 'Ext.carousel.Carousel'],
fullscreen: true,
config: {
iconCls: 'books',
iconMask: true,
title: 'Cataloghi',
styleHtmlContent: true,
store: Ext.create('CIAM_app.store.lista_cataloghiStore'),
variableHeights: true,
listConfig: {
itemTpl: '<tpl if="leaf == false"><img src="http://www.ciamcostruzioni.it/CIAM_app/not_compiled/{icon}" alt="{text}" class="cataloghi_img" /></tpl><tpl if="leaf == true"><p class="cataloghi_p">{text}</p></tpl>'
},
listeners: {
leafitemtap: function(nestedList, list, index, target, record) {
var detailCard = nestedList.getDetailCard();
var pagina = record.get('immagini_catalogo');
var n = record.get('pagine_catalogo');
items = [];
if (detailCard.getData() !== null) {
detailCard.getStore().removeAll(true, true);
}
for (i = 1; i <= n; i++) {
items.push({
src: 'http://www.ciamcostruzioni.it/CIAM_app/not_compiled/gallery/' + pagina + '/' + i + '.jpg'
});
}
detailCard.setData(items);
detailCard.refresh();
}
},
detailCard: {
xtype: 'dataview',
itemTpl: '<img src="{src}">',
cls: 'immagine_catalogo',
listeners: {
itemtap: function(dataView, index, target, record, e, eOpts) {
Ext.Viewport.add({
xtype: 'catalogues_carousel',
listeners: {
initialize: function() {
this.setItems(dataView.getData());
this.setActiveItem(index);
}
}
}).show()
}
}
}
}
});
Ext.define('CIAM_app.view.Cataloghi_carousel', {
extend: 'Ext.Carousel',
xtype: 'catalogues_carousel',
requires: ['Ext.carousel.Carousel'],
config: {
fullscreen: true,
defaultType: 'image',
style: {
'background': 'rgba(206,203,203,0.87)',
'z-index':10
},
indicator: false,
modal: true,
showAnimation: {
type: 'popIn',
duration: 250,
easing: 'ease-out'
},
hideAnimation: {
type: 'popOut',
duration: 250,
easing: 'ease-out'
}
},
initialize: function() {
this.element.on('tap',function() {
this.hide();
});
}
});