Results 1 to 6 of 6

Thread: Editing Panel Layout in Complex Layout Example

  1. #1

    Default Editing Panel Layout in Complex Layout Example

    I am trying to accomplish a north panel as seen in this example:

    http://www.mojoportal.com/demopages/...ayoutDemo.aspx

    Currently I have only east, and west in our project.

    Couldn't find anything on how to do this in the forums so far, anyone mind helping a n00b?

    Thanks for your time,

    Mike

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Location
    Tulsa, Oklahoma
    Posts
    179

    Default



    Uhm.....

    Look at the code? Not sure anyone can provide you more help that you grabbing the code and using!
    Thanks!
    Chuck

  3. #3
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    That's the best/worst thing about working in JS. There's no way to hide the code well. If you find an example of what you want, then it's as easy as View Source.

  4. #4

    Default

    OK so currently we have this:

    // create some portlet tools using built in Ext tool ids
    var viewport = new Ext.Viewport({
    layout:'border',
    items:[{
    region:'west',
    html: "<div id='sideBar'> </div>",
    title: STRANDS.locale.SidebarWest.title,
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    collapsed: true,
    autoScroll: true,
    margins:'60 0 5 5',
    cmargins:'60 5 5 5',
    layout:'accordion',
    layoutConfig:{
    animate:true
    }, container ,
    { region:'east',
    autoLoad: {url: contextPath + "/sidebareast.html"},
    split:true,
    title: STRANDS.locale.SidebarEast.title,
    width: 200,
    minSize: 175,
    maxSize: 400,
    autoScroll: true,
    collapsible: false,
    margins:'60 0 5 0',
    cmargins:'60 5 5 0',
    layout:'accordion'
    }
    }
    ]
    });

  5. #5
    Ext User para's Avatar
    Join Date
    Apr 2007
    Location
    Redmond, WA
    Posts
    918

    Default

    Ok, so they currently have this
    Code:
    var ViewportvpMain = {   
     init : function(){  
     var viewPort = new Ext.Viewport({  layout:'border'  
     , items:[
     {  contentEl:'pnlTop'  , title: 'Top Panel' , region: 'north', height: '100', collapsible: true , split: true , minSize: 100, maxSize: 250 } 
    , {  contentEl:'pnlRight'  , title: 'Right Side' , region: 'east', layout: 'fit', width: 225, collapsible: true , split: true , minSize: 175, maxSize: 400 } 
    , {  contentEl:'pnlLeft'  , title: 'Left Side' , region: 'west', layout: 'accordion', width: 200, collapsible: true , split: true , minSize: 175, maxSize: 400, layoutConfig:{ animate:true }
     ,items:[
     {  contentEl:'navExternalMail'  , title: 'External Mail' , iconCls: 'nav'  } 
    , {  contentEl:'navSiteMail'  , title: 'Site Mail' , iconCls: 'nav'  } 
    , {  contentEl:'navMyStuff'  , title: 'My Stuff' , iconCls: 'nav'  }  ]   } 
    ,new Ext.TabPanel({contentEl:'tpCenter',id:'tptpCenter',title:'TabPanel1',region:'center',deferredRender:false,activeTab:0,items:[{contentEl:'tab1',id:'tabtab1',title:'Tab 1',autoScroll:true},{contentEl:'tab2',id:'tabtab2',title:'Tab 2',autoScroll:true},{contentEl:'tab3',id:'tabtab3',title:'Tab 3',closable:true,autoScroll:true}]})
    , {  contentEl:'pnlBottom'  , title: 'Bottom Panel' , region: 'south', height: '100', collapsible: true , split: true , minSize: 100, maxSize: 400 } ]  });  } } 
     Ext.EventManager.onDocumentReady(ViewportvpMain.init, ViewportvpMain, true);
    Combine your code and theirs.


    Notice the use of CODE tags around the code, which makes it easy to read.

  6. #6

    Default

    Code:
        var viewport = new Ext.Viewport({
            layout:'border',
            items:[{
                region:'north',
                html: "<div id='sideBar'> </div>",
                title: STRANDS.locale.SidebarWest.title,
                split:true,
                height: 200,
                minSize: 175,
                maxSize: 175,
                collapsible: true,
                collapsed: true,
                autoScroll: true,
                margins:'0 0 0 0',
                cmargins:'0 0 0 0',
                layout:'accordion',                                                           
                layoutConfig:{
                animate:true
                }
            }, container
           ]
        });
    This ended up working perfectly. Thanks. Guess was I being a little lazy in not really looking at it, sorta got scared of the javascript (I'm primarily a css guy).

    Thanks.

Posting Permissions

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