PDA

View Full Version : [2.0a1][CLOSED][ Ext.Panel + accordion and frame:true color/pad inner panels



Saeven
5 Oct 2007, 12:40 PM
As evidenced by:



var accordion = new Ext.Panel({
title: "Latest in Support",
layout: 'accordion',
iconCls: 'accordion',
renderTo: 'featured_box',
width: 205,
height: 400,
shim: false,
border: false,
frame: true,
constrainHeader: true,
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
animate: true
},
items: [ { title: 'New Articles', html: '<p>Panel content!</p>' },
{ title: 'Popular Discussions', html: '<p>Panel content!</p>' },
{ title: 'Top Searches', html: '<p>Panel content!</p>' }
]
});

.... over ....

<!-- center table -->
<table width="90%" border="1" cellpadding="5" align="center">
<tr>
<td width="215">
<div id="account_box">

</div>
</td>
<td>
<div id="main_content">

</div>
</td>
<td width="215" valign="top">
<div id="featured_box">

</div>
</td>
</tr>
</table>


HTH!
Alex

mystix
5 Oct 2007, 7:38 PM
13985

ext-base?
browser?

jack.slocum
6 Oct 2007, 12:00 PM
The default CSS can not possibly cover every combination of Panels and framing you throw at it. If something doesn't look quite right, you may have to provide some CSS (as we do in the samples) to adjust borders, styles and/or padding.

One thing to note, as it is you can't nest another panel inside a framed Panel as it will surely create some conflicting CSS. The only way to undo the conflicting CSS is by adding additional CSS to fix the conflicts on your end or by providing a different baseCls to the child Panels and then applying the desired CSS to that new reusable baseCls.