View Full Version : Panel layout help : Nested panels.

24 Aug 2011, 1:31 AM
Struggling to create the right layout on my "dashcard panel".. All of the tile panels just float on top of each other. Anyone help??

var rep1 = new PortalDashboard.views.Reportimagetile(repData);
var rep2 = new PortalDashboard.views.Reportimagetile(repData);
var rep3 = new PortalDashboard.views.Reportsinglefigtile;
var rep4 = new PortalDashboard.views.Reportimagetile(repData);
var rep5 = new PortalDashboard.views.Reportimagetile(repData);
var rep6 = new PortalDashboard.views.Reportimagetile(repData);

PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
title: 'Dashboard',
html: '',
cls: 'card5',
layout: 'fit',
iconCls: 'team',
styleHtmlContent: true,
initComponent: function () {
Ext.apply(this, {
items: [
rep1, rep2, rep3, rep4, rep5, rep6
PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);


24 Aug 2011, 4:58 AM
The best way I can suggest doing this (by looking at that diagram) is to have your Dashboardcard panel use a 'vbox' layout. Then as items in this Dashboardcard panel, you can put in 2 sub-panels with an 'hbox' layout. Then add the items accordingly to each of the sub-panels.

When you have the layout: 'fit', you will only see one of the "rep's" you create because it is fit to the size of your Dashboardcard.

24 Aug 2011, 5:19 AM
My worry about having a hbox & vbox concoction is that the layout won't properly work when the screen orientation changes between landscape and portrait.

Not sure if i can (and how effective it would be) change the layout as the screen is rotated.

24 Aug 2011, 5:25 AM
You can try 'layoutOnOrientationChange: true,' as a config option for your Dashboardcard Panel. And have something like

layout: Ext.Viewport.orientation == 'landscape' ? 'vbox' : 'hbox'
for all your panels (just change the layouts according to the orientation)

I'm not sure if that will work or not