CODEWITHSUNDEEP
sencha-touch-2
BillyMedia
BillyMedia

Reputation: 1354

Reference a carousel xtype from within a container in sencha touch 2

I have this code:

Ext.define('play.view.Quiz', {
extend: 'Ext.Container',
xtype: 'myquiz',
config: {
    fullscreen: true,
    layout: 'vbox',
    title: 'My Quiz',
    items: [
        /* Questions */
        {
            xtype: 'my_questions'
        },
    ]
}
});

and

Ext.define('play.view.Questions', {
extend: 'Ext.Carousel',
xtype: 'my_questions',
config: {
    defaults: {
        styleHtmlContent: true
    },
    items: [
        {
            html : 'Item 1',
            style: 'background-color: #5E99CC'
        },
        {
            html : 'Item 2',
            style: 'background-color: #759E60'
        },
        {
            html : 'Item 3'
        }
    ]
}
});

The questions wont display, yet when i place the questions within the quiz items, they display.

Is it possible to reference a carousel xtype from a container?

Upvotes: 2

Views: 981

Answers (1)

hekomobile
hekomobile

Reputation: 1388

Yes @Bohbo can you do something like this:

Ext.define('play.view.Questions', {
  extend: 'Ext.Carousel',
  xtype: 'my_questions',
  config: {
     defaults: {
     styleHtmlContent: true,
     layout: 'fit',
     items: [
           {
             html : 'Item 1',
             style: 'background-color: #5E99CC'
           },
           {
             html : 'Item 2',
             style: 'background-color: #759E60'
           },
           {
             html : 'Item 3'
           }
         ]
  },
});

Note important element is layout:'fit'. I hope this helps. :)

Upvotes: 1

Related Questions