Sencha Touch 2.2.1 Карусель не инициализирована
Я вернулся к проекту приложения просмотра каталога, и после обновления до последнего выпуска sencha у меня возникла та же проблема, что и пару месяцев назад... карусель не распознала событие onTap или она выиграла " загружать правильно.
Приложение довольно простое, структура следующая:
- название компании
- список каталогов
- подробная карта со страницами каталога (по 3 в строке)
- карусель, начиная со страницы постучал
- подробная карта со страницами каталога (по 3 в строке)
- список каталогов
Тот факт, что когда я использую приложение, НЕ скомпилированное с Sencha cmd, оно работает очень гладко и без проблем, но когда я создаю приложение (также производственное и упаковочное) с Sencha cmd, оно не будет работать.
В окне данных отображаются все изображения, и когда я щелкаю по одному из них, появляется карусель, но она пуста. Я попытался отладить, и он не будет выполнять инициализацию, но почему только в версии сборки?
Код, который я использую, следующий:
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();
}
}
}
}
});
Если вы хотите увидеть веб-приложение, вот ссылка: http://www.ciamcostruzioni.it/CIAM_app/not_compiled/
Заранее спасибо.
1 ответ
Я сделал некоторые изменения в вашем коде. Проверь это:
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();
});
}
});