Navigation view is not rendering the items correctly

Question

The view doesnt render properly . It only shows the button . What am i doing wrong here ?

Ext.application({
  name: 'App',    
  models: ['Picture'],
  stores: ['Pictures'],
  views: ['Picture'],

  requires: [
      'Ext.carousel.Carousel',
      'Ext.data.proxy.JsonP'
  ],

  launch: function() {
      var titleVisible = false,
          info, carousel;


      carousel = Ext.create('Ext.Carousel', {

          store: 'Pictures',
          direction: 'horizontal',
          listeners: {
              activeitemchange: function(carousel, item) {
                  info.setHtml(item.getPicture().get('title'));
              }
          }
      });


      info = Ext.create('Ext.Component', {
          cls: 'apod-title',
          top: '50',
          left: 0,
          right: 0
      });

      var view = Ext.create('Ext.NavigationView', {
      title:'Paramore',
      items: [carousel,info,{xtype:'button',text:'help'}]

      });


       Ext.Viewport.add(view);

     --- some code ----           

      });


  }
});

.I also tried this

var view = Ext.create('Ext.NavigationView', { title:'Test', items : [ { xtype : 'container', title : 'test', scrollable : 'vertical', items : [carousel,info] }

Answer 1

There are a few issues with your code:

1. Ext.Carousel does not support the store configuration. You can learn how to do this here.

2. The items specified in a navigation view is the initial stack of items when released. So if you put in 3 items, the last item will be visible and the Back button will be visible. When you press the back button, it will remove that last item and there will be 2 items in the items stack.

3. You probably shouldn't put a Ext.Button directly inside a NavigationView. Doing this will make the button stretch to the size of the NavigationView, making it look pretty bad.

If you remove the reference to a store and listeners from your Carousel, your example works as expected. Here is the code I used to make it work. I just commented out broken code:

Ext.application({
    name: 'App',
    // models: ['Picture'],
    // stores: ['Pictures'],
    // views: ['Picture'],
    requires: ['Ext.carousel.Carousel', 'Ext.data.proxy.JsonP'],

    launch: function() {
        var titleVisible = false,
            info, carousel;

        carousel = Ext.create('Ext.Carousel', {
            // store: 'Pictures',
            direction: 'horizontal',
            items: [{
                html: 'one'
            }, {
                html: 'two'
            }, {
                html: 'three'
            }]
            // listeners: {
            //     activeitemchange: function(carousel, item) {
            //         // info.setHtml(item.getPicture().get('title'));
            //     }
            // }
        });

        info = Ext.create('Ext.Component', {
            cls: 'apod-title',
            top: '50',
            left: 0,
            right: 0
        });

        var view = Ext.create('Ext.NavigationView', {
            title: 'Paramore',
            items: [carousel, info,
            {
                xtype: 'button',
                text: 'help'
            }]
        });

        Ext.Viewport.add(view);
    }
});