PDA

View Full Version : Editing Panel Layout in Complex Layout Example



misomath
12 Feb 2008, 12:53 PM
I am trying to accomplish a north panel as seen in this example:

http://www.mojoportal.com/demopages/ExtJsComplexLayoutDemo.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

ckr
12 Feb 2008, 1:01 PM
/:)

Uhm.....

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

para
12 Feb 2008, 1:48 PM
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.

misomath
12 Feb 2008, 2:52 PM
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'
}
}
]
});

para
13 Feb 2008, 5:54 AM
Ok, so they currently have this

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.

misomath
15 Feb 2008, 10:41 AM
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.