Hi folks,
I want use the new Navigation View for an easy navigation structure in my app. Everything seems to work fine, but i can not realize a carousel on a Navigation View. Here is my code:
HTML Code:
Ext.define('App.view.Viewport2', { extend: 'Ext.NavigationView', xtype: 'headerscreen', config: { fullscreen: true, defaults: { //scrollable: true, //styleHtmlContent: true }, items: [ { title: 'Home', items: [ { id: 'header', height: 185, docked: 'top', xtype: 'container', html: '<h1>Just one more</h1><ul id="menu"><li id="latest">Latest</li><li><a href="#Main/aboutscreen" id="random">Random</a></li></ul>' }, { html: 'Test' }, { xtype: 'home_carousel', } ], }, ] },
initialize: function() { console.log('>> HEADER [created]'); this.callParent(); }});
and here is my carousel:
HTML Code:
Ext.define('App.view.HomeCarousel', { extend: 'Ext.Carousel', xtype: 'home_carousel', // Custom CSS class id: 'test', config: { //fullscreen: true, defaults: { flex: 1, //baseCls: 'test', styleHtmlContent: true },
layout: { type: 'vbox', align: 'stretch' }, items: [ { html : 'Item 1', style: 'background-color: #5E99CC' }, { html : 'Item 2', style: 'background-color: #759E60' }, { html : 'Item 3' } ] },
initialize: function() { console.log('>> HomeCarousel [created]'); this.callParent(); }});
If I extend with Ext.container the whole thing work and I can see my carousel - with Ext.NavigationView it's not visibile. Any suggestions?