Results 1 to 4 of 4

Thread: Border Layout - top margin

  1. #1
    Ext User
    Join Date
    Nov 2009
    Posts
    3
    Vote Rating
    0
      0  

    Default Border Layout - top margin

    i got the complex layout working, but i would like the top margin to begin lower than the top of the page.

    where can i set the top margin for the layout?
    ideally i would like to put a header at the top and start the layout after the header.

    thanks!

  2. #2
    Sencha User abe.elias's Avatar
    Join Date
    Aug 2008
    Location
    Palo Alto, CA
    Posts
    407
    Vote Rating
    25
      0  

    Default

    I assume you are using a border layout on your viewport.

    I've included some Designer screenshots, that illustrate having a panel in the north region and then turning off the header.

    You can use a container too, hope this helps. I suggest downloading the Designer and playing around with some options.
    Attached Images Attached Images

  3. #3
    Ext User
    Join Date
    Nov 2009
    Posts
    3
    Vote Rating
    0
      0  

    Default thanks!

    i had no idea that there was a designer. thanks ... will check that out.

  4. #4
    Ext User
    Join Date
    Nov 2009
    Posts
    3
    Vote Rating
    0
      0  

    Default thanks

    thanks abe, for the lead.

    looks like the answer that i was looking for was the "cmargin" property. just for future reference, this is what i came up with ...



    new Ext.Viewport(
    {
    layout : "border",
    items : [
    {
    region : "center",
    title : "center"
    },
    {
    region : "north",
    title : "north",
    split : true,
    titleCollapse : true,
    margins: { top: 100, right: 0, bottom: 0, left: 0 },
    cmargins: { top: 100, right: 0, bottom: 0, left: 0 },
    closable : false,
    collapsible : true,
    height : 75
    },
    {
    region : "south",
    title : "south",
    height : 100,
    split : true,
    collapsible : true,
    titleCollapse : true
    },
    {
    region : "west",
    title : "west",
    width : 150,
    split : true,
    collapsible : true,
    items :
    [
    {
    layout : "accordion",
    layoutConfig :
    {
    activeOnTop : false,
    animate : true,
    autoWidth : true,
    collapseFirst : true,
    fill : true,
    hideCollapseTool : false,
    titleCollapse : true
    },
    items :
    [
    {
    title : "Panel 1",
    autoHeight : false,
    html : "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus."
    },
    {
    title : "Panel 2",
    autoHeight : false,
    html : "Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
    },
    {
    title : "Panel 3",
    autoHeight : false,
    html : "Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
    },
    {
    title : "Panel 4",
    autoHeight : false,
    html : "Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."
    }
    ]
    }
    ]
    },
    {
    region : "east",
    title : "east",
    width : 150,
    split : true,
    collapsible : true
    }
    ]
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •