View Full Version : Navigation View dont support carousel in it?

18 Dec 2011, 10:27 AM
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:

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:

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?

18 Dec 2011, 10:34 AM
Sorry - everytime when i copy & paste my code it doesn't format properly, dont know why :(

2 Jan 2012, 2:17 AM
I didn't find the answer yet, but I write it down here just in case it might help.
I guess it is something between the navigation view and the component with items.
I tried to push the panel which has 'items' configures, which was perfect the other time,
but now I found errors using it with navigation view at the same time.

2 Jan 2012, 4:26 AM
I finds some mistakes and it has nothing to do with navigation view..

I hope this article will help you