[2.0a1][CLOSED] Ext.Panel created using applyTo gets extra elements appended.

[Animal]

I'm using our legacy web app as a simple way to get into Ext 2.0 because it will use the simpler classes - Panel, ToolTip etc...

So I'm changing my old popup datepicker to be managed by a Panel rather than setting the visibility and position manually.

I create the Panel from an existing table that was written into the page markup:



calendarObject = new Ext.Panel({
applyTo: "calendarControl",
floating: true
});


The "calendarControl" element is a table. I expected the table to become the whole panel.

What it is doing is using the table as the overall element nicely, but it is appending an x-panel-bwrap element containing an x-panel-body element to the element.

applyTo should mean that the programmer is on control of the element that encapsulates the Component. That element is both the Component element and the body element.

You can see the extra div highlighted in Firebug in the screenshot below:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/bwrap.jpg

[jack.slocum]

There is a set of elements that compose a Panel, e.g. a header, body, footer. applyTo will look for existing divs with the appropriate classes in order to convert existing markup into an Ext.Panel. The process of creating an Ext.Panel from existing markup will result in Ext creating the elements it requires if they don't already exist.

A table is not a valid Ext.Panel. You could try to using a BoxComponent if you just need to include it in a layout.

[Animal]

Is there some way to use an arbitrary, existing element as the body, and have that element wrapped in an x-panel-bwrap element to create a valid Panel?

[jack.slocum]

contentEl config will append it.

To make it "fit", a Panel with a layout fit and a BoxComponent (or xtype:'box') as a child item with el: 'yourTable'.