CODEWITHSUNDEEP
sencha-touchsencha-touch-2carousel
Suzker
Suzker

Reputation: 15

sencha touch 2: card layout within one of the panel of a carousel

What I'm trying to do here is to use a card layout within the panel of a carousel. But it seems impossible that it's not common to create a card layout and the carousel is actually one of the card-layout-like container. So I wonder if it can be achieved in Sencha Touch 2.

Here is my main view, a plain carousel container:

Ext.define("myapp.view.Main", {
    extend: 'Ext.carousel.Carousel',

    config: {

        defaults: {
            styleHtmlContent : true
        },

        activeItem: 0,

        items: [
            {
                xtype: 'firstview'
            },
            {
                xtype: 'secondview'
            },
            {
                xtype: 'thirdview'
            }
        ]
    }
});

and here is my 'firstview', which extends the Ext.Panel as part of the carousel container:

Ext.define("myapp.view.Compose", {
    extend: 'Ext.Panel',
    xtype: 'firstview',

    requires: [
        'Ext.form.FieldSet',
        'Ext.TitleBar',
        'Ext.form.Text',
        'Ext.Button'
    ],

    config: {
        styleHtmlContent: true,
        scrollable: true,
        layout: 'vbox',

        items: [
            { // title bar
                xtype: 'titlebar',
                docked: 'top',
                title: 'a Title here'
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                layout: {
                    type: 'vbox',
                    align: 'center',
                    pack: 'center'
                },

                items: [
                    { // controll button set - to change view for composing different kinds of messages
                        xtype: 'segmentedbutton',
                        allowDepress: true,
                        allowMultiple: false,
                        items: [
                            {
                                text: 'subview-1',
                                pressed: true
                            },
                            {
                                text: 'subview-2'
                            },
                            {
                                text: 'subview-3'
                            }
                        ]
                    }
                ]
            },
        {
            xtype: 'container',
            id: 'id_compose_card',
            layout: {
                type: 'card',
                align: 'center',
                pack: 'top'
            },

            config: {
                height: '100%',
                items: [
                {
                    html: 'card 1'
                },
                {
                    html: 'card 2'
                }
            ]
            }
        }
            ]
        }

});

as you can see, there is a card layout within this panel. But as a matter of fact nothing is not going to display.

Of course, I can find another way out to achieve some thing similar here, but I just want to know is it impossible to embed a card container into a card-layout-like container, for example, 'tabPanel' or 'carousel' in sencha touch 2?

Upvotes: 1

Views: 2952

Answers (1)

blessanm86
blessanm86

Reputation: 31789

Hey in the Compose widget replace the the part with id:'id_compose_card'

with this

{
    xtype: 'container',
    id: 'id_compose_card',
    layout: {
        type: 'card',
        align: 'center',
        pack: 'top'
    },
    flex: 1,
    items: [
        {
            html: 'card 1'
        },
        {
            html: 'card 2'
        }
    ]
}

I just took out the parts inside the config object and put them outside. Im getting this feeling that u cant nest a config inside another config object for a class definition. A lot of people are having issue and this seems to be the problem. You might want to confirm this on their forum.

Then I also replaced the attribute

height: '100%',

with this

flex:1

This will tell the vbox layout to make your component fill the remaining space.

Upvotes: 1

Related Questions