Just because the examples show one thing does not mean that's the only way to do it. You could quite easily render portlets as static HTML in divs then sucks those into Panels/portlets via JS. Pretty much all the major widgets in Ext support rendering components from markup.
Having a Panel manage a complex layout in which it must size its components exactly really requires that the Panel be in full control of its own content.
If you just throw arbitrary HTML into its body (which there is nothing preventing you from doing, try it!), then all you will do is spoil the nice accordion.
if you want an accordion AND something below it, use a layout:'border'. Put a Panel with layout:'accordion' in the center, and another Panel in the south, and put any old HTML into the south Panel's body.
i use a panel for the layout of a defined region for dynamically loaded/dump html content(s) by creating a panel to load the url, so such panels are placeholders for html contents, dynamically destroy/newed. I haven't tried yet but I would like to change the region layout by destroying the panel for that region layout and new it with different layout. is this doable ?
when a panel is first created at panel factory without knowing what html content/js stuffs is to be loaded on it, how can i make such dynamically loaded html contents be self-contained (like iframe) so that all events originated on the page will not go beyond the placeholder panel ? I prefer to do something at panel creation inside panel factory to make sure that html contents to be loaded will act independently of the rest of html main page, is this doable ? if not, what can I do on html contents that are going to be loaded.