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

[Saeven]

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]

13985

ext-base?
browser?

[jack.slocum]

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.