1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Orange County, CA
    Posts
    4
    Vote Rating
    0
    4carlosanderson is on a distinguished road

      0  

    Default Unanswered: How do I make a two column layout with a header row?

    Unanswered: How do I make a two column layout with a header row?


    I am new to Sencha Touch, so please bear with me. I am attempting to make a page layout with a header for navigation and some header content, along with two columns below the header. The left column would contain a carousel and the right container would contain an accordion. I have a basic understanding of how to construct the individual components (i.e. navigation, carousel and accordion), but I can't quite grasp the concept of nesting them all in a parent container. How should I go about building the basic structure for this type of layout?

    Thanks,
    Carlos

  2. #2
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,341
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    This forum is for ExtJS 4. Please post in the Sencha Touch forum.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Orange County, CA
    Posts
    4
    Vote Rating
    0
    4carlosanderson is on a distinguished road

      0  

    Default


    Sorry for improperly phrasing my question, but I am actually more interested in the Ext JS 4 functionality. I understand HTML, CSS and Javascript/JQuery but Ext JS seems to be a much more logical way to build Object Oriented web apps. Any help or suggestions will be much appreciated.

    Thanks,
    Carlos

  4. #4
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,341
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Here are two alternatives to consider.

    Code:
    Ext.create('Ext.container.Viewport', {
        layout: {
            type: 'border'
        },
        items: [
            {
                height: 100,
                margins: '5',
                region: 'north',
                title: 'North'
            }, {
                collapsible: true,
                margins: '0 0 5 5',
                region: 'west',
                split: true,
                title: 'West',
                width: 400
            }, {
                margins: '0 5 5 0',
                region: 'center',
                title: 'Center'
            }
        ]
    });
    Code:
    Ext.create('Ext.container.Viewport', {
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        items: [
            {
                height: 100,
                margin: '5',
                title: 'North'
            }, {
                flex: 1,
                xtype: 'container',
                layout: {
                    align: 'stretch',
                    type: 'hbox'
                },
                items: [
                    {
                        margin: '0 5 5 5',
                        title: 'West',
                        width: 400
                    }, {
                        flex: 1,
                        margin: '0 5 5 0',
                        title: 'Center'
                    }
                ]
            }
        ]
    });

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar