View Full Version : How to apply html to Panel

12 Aug 2010, 10:14 AM
This is actually somewhat related to: http://www.sencha.com/forum/showthread.php?79191-HtmlLayout-Use-Ext-components-in-plain-HTML

For the HTML config of the Panel, instead of specifying it inline, how can I grab a Table that is already defined in the underlying web page? This makes it much easier to use on larger, more complex layouts.


12 Aug 2010, 2:05 PM
Take a look at the contentEl configuration.

You can specify a string of an id within your underlying page. It will take the contents out of this div, and place it in the center of the Panel. You can also add a css class of "x-display-hidden" so that the content doesn't flash on the screen when it is first rendered and then moved.

12 Aug 2010, 9:45 PM
contentEl is one way to skin that cat.

It moves the specified element into the body.

If you need an element to be sized along with the Panel (if the Panel is resizable due to being part of a layout), then you can configure the Panel with

body: Ext.get('main-content').addClass('x-panel-body')


layout: 'fit',
items: {
xtype: 'box',
el: 'main-content'