PDA

View Full Version : [Solved] Panel on tab page layout problem - center is under west



murrah
10 Feb 2008, 4:48 PM
Hi,

I have a layout problem. I want to have a tab page that contains a treePanel in the west and a gridPanel in the centre. The problem is that the centre panel is appearing below the west panel. I originally had the tree and grid directly on a ViewPort - ie no tabs - and it was all working correctly. Now I want to have tabs on the Viewport and the tree and grid on one of the tab pages.

So, I have cut down the code completely and removed all my testing ideas since none of them worked. The sample below is a ViewPort that contains just one tab page that in turn contains 3 panels - a north, west and centre. When I run that code I get north, west and centre all left aligned down the page in that order.

I have looked through the docs and forum and am obviously misunderstanding how the layouts work.



Ext.onReady(function(){

// Tab pages for Center panel
var mainTabs = new Ext.TabPanel({
region:'center',
activeTab: 0,
height:300,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Links',
items:[

new Ext.Panel({
region:'north',
html: 'North'
}),

new Ext.Panel({
region:'west',
width:'100',
html: 'West'
}),

new Ext.Panel({
region:'center',
width:'200',
html: 'Center'
})
]
}] // end mainTabs items
}); // end mainTabs

// Now just plug the various items into the viewport
var viewport = new Ext.Viewport({
layout:'border',
items:[mainTabs]
}); // end of viewport object definition

}); // end of Ext.onReady function




Is there any tutorial or docs that explains how the layouts work in Ext?

Thanks,
Murray

evant
10 Feb 2008, 4:54 PM
Your code is assigning the north/west/center regions as tab panels inside the tab.

You want something more like:



var viewport = new Ext.Viewport(
{
layout:'border',
items:
[
{
region: 'north',
html: 'north'
},

{
region: 'west',
items: [/*treepanel decl here*/]
},

{
region: 'center',
items: [/*gridpanel declaration here*/]
}
]
}
);


This is probably the most relevant example: http://extjs.com/deploy/dev/examples/layout/complex.html

murrah
10 Feb 2008, 5:20 PM
Hi Evant,

Thanks for your quick reply. I may not have been clear enough. What I am trying to do is to have a Viewport that contains a set of tabs in the centre region. On one of those tab pages I want a treePanel in the west and a gridPanel in the centre. So, the nesting goes: Viewport --> Tabpage --> treePanel & gridPanel on that specific tab page.

On my sample code I have removed all the other tab pages and the tree and the grid so I can test how to layout the tree and grid on a tabpage.

Thanks again,
Murray

ckr
10 Feb 2008, 7:44 PM
Not sure if this is what you had in mind? (TAB 2 Has your Tree and Grid)
Demo (http://clan.homelinux.com:8080/ext-samples/mylayout-demo.html)

HTML Looks like:


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Layout Demo</title>

<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/test/forums/desktop.css" />
<link rel="stylesheet" type="text/css" href="/test/forums/windows.css" />

<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="/test/forums/mylayout-demo.js"></script>

<style type="text/css">
html, body
{
font:normal 12px verdana;
margin:0;
padding:0;
//border:0 none;
border:none;
overflow:hidden;
height:100%;
}
</style>
<script type="text/javascript">
Ext.onReady(PanelUI.app.init, PanelUI.app);
</script>
</head>


<body>
<div id="myDesktop">
</div>
</body>

</html>


Javascript looks like (just threw this together from examples):



Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';

Ext.namespace('PanelUI');

PanelUI.app = function()
{
return {
init : function()
{
Ext.QuickTips.init();
/////////////////////////////////////////////////////
function onAddBtnClick(btn)
{
alert('Alert me!');
}

var myTree = new Ext.tree.TreePanel(
{
id:'im-tree',
region:'west',
border:false,
collapsible:true,
width:150,
animate:true,
split:true,
title: 'Online Users',
loader: new Ext.tree.TreeLoader(),
rootVisible:false,
lines:false,
autoScroll:true,
tools:
[
{
id:'refresh',
on:
{
click: function()
{
var tree = Ext.getCmp('im-tree');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function()
{
// mimic a server call
tree.body.unmask();
tree.root.expand(true, true);
}, 1000);
}
}
}
],
root: new Ext.tree.AsyncTreeNode(
{
text:'Online',
children:
[
{
text:'Friends',
expanded:true,
children:
[
{
text:'Jack',
iconCls:'user',
leaf:true
},{
text:'Brian',
iconCls:'user',
leaf:true
},{
text:'Jon',
iconCls:'user',
leaf:true
},{
text:'Tim',
iconCls:'user',
leaf:true
},{
text:'Nige',
iconCls:'user',
leaf:true
},{
text:'Fred',
iconCls:'user',
leaf:true
},{
text:'Bob',
iconCls:'user',
leaf:true
}
]
},{
text:'Family',
expanded:true,
children:
[
{
text:'Kelly',
iconCls:'user-girl',
leaf:true
},{
text:'Sara',
iconCls:'user-girl',
leaf:true
},{
text:'Zack',
iconCls:'user-kid',
leaf:true
},{
text:'John',
iconCls:'user-kid',
leaf:true
}
]
}
]
})
});
var myGrid = new Ext.grid.GridPanel(
{
region:'center',
border:true,
border:false,
animate:true,
collapsible: true,
split: true,
autoScroll: true,
ds: new Ext.data.Store(
{
reader: new Ext.data.ArrayReader({},
[
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]),

/// Static Data for Grid /////
data:
[
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company(The Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
]
}),
cm: new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{
id:'company',
header: "Company",
width: 120,
sortable: true,
dataIndex: 'company'
},
{
header: "Price",
width: 70,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price'
},
{
header: "Change",
width: 70,
sortable: true,
dataIndex: 'change'
},
{
header: "% Change",
width: 70,
sortable: true,
dataIndex: 'pctChange'
},
{
header: "Last Updated",
width: 95,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
]),
viewConfig:
{
forceFit:true
},
tbar:
[
{
text:'Add Something',
tooltip:'Add a new row',
handler:onAddBtnClick,
iconCls:'add'
},
'-',
{
text:'Options',
tooltip:'Blah blah blah blah',
iconCls:'option'
},
'-',
{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}
]
});

var myTabPanel = new Ext.TabPanel(
{
activeTab: 0,
region: 'center',
bodyBorder: false,
items:
[
new Ext.Panel(
{
title: 'Tab 1',
layout: 'border',
border: false,
items:
[
new Ext.Panel(
{
title: 'Inside Tab 1',
region: 'center',
height: 100,
width:100
})
]
}),
new Ext.Panel(
{
title: 'Tab 2',
layout: 'border',
border: false,
items:
[
myTree,
myGrid
]
})
]
});
var viewport = new Ext.Viewport(
{
layout: 'border',
items:
[
new Ext.Panel(
{
title: 'North',
region: 'north',
collapsible: true,
split: true,
height: 100
}),
new Ext.Panel(
{
title: 'West',
region: 'west',
collapsible: true,
split: true,
width: 100
}),
myTabPanel,
new Ext.Panel(
{
title: 'East',
region: 'east',
collapsible: true,
split: true,
width: 100
}),
new Ext.Panel(
{
title: 'South',
region: 'south',
collapsible: true,
split: true,
height: 100
})
]
});

viewport.doLayout();

///////////////////////////////////////////////////////
}
};
}();

murrah
10 Feb 2008, 10:05 PM
Yes, thanks Chuck. That's the layout I wanted. I can now work through your code to see how this layout stuff works.

Thanks again,
Murray

murrah
11 Feb 2008, 1:17 AM
Thanks to Chuck's demo above, here is a skeleton / framework that allows a nested format within a tab page within a ViewPort. You can substitute any other panel descendant in place of the ones nested within the tab panel eg a treePanel or a gridPanel etc.



Ext.onReady(function(){

// Tab pages for Center panel
var mainTabs = new Ext.TabPanel({
bodyBorder: false,
region:'center', // ie place the tabPanel in the centre region of the ViewPort (below)
activeTab: 0,
height:300,
plain:true,
defaults:{autoScroll: true},
items:[
// A panel to create the first tab page
new Ext.Panel
({
title:'Tab 1', // The label on the tab
layout:'border',
border:false,

// These are the items that make up the layout
// that is nested on the first tab page. In this
// case they are basic panels but you could substitute
// a treePanel or a gridPanel (for example)
// The region specifies where on the parent panel the panel will render
items:
[
new Ext.Panel({
region:'north',
html: 'North panel contents'
}),

new Ext.Panel({
region:'west',
html: 'West panel contents'
}),

new Ext.Panel({
region:'center',
html: 'Center panel contents'
}),

new Ext.Panel({
region:'south',
html: 'South panel contents'
})
]
}),

// A second tab page
new Ext.Panel
({
title: 'Tab 2',
layout: 'border',
border: false,

// The contents of the second tab page.
// In this case just another panel
items:
[
new Ext.Panel({
title: 'Inside Tab 2',
region: 'center',
height: 100,
width:100
})
]
})

] // end mainTabs items
}); // end mainTabs declaration


// Now just plug the various items into the viewport. In this case just a
// north panel for a heading and the tabPanel declared above
// Remember, there can be only one Viewport component per browser page

var viewport = new Ext.Viewport({
layout:'border',
items:
[
new Ext.Panel
({
title: 'My heading',
region: 'north', // ie this panel goes in the north region of the Viewport
collapsible: true,
split: true,
height: 50,
html:'Welcome to my site, blah blah'
}),

mainTabs // The previously declared tabPanel
]
}); // end of viewport object definition

}); // end of Ext.onReady function