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 Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      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 Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      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