Hi,
ExtJS panel has two important properties which affected on what content you see inside the panel
- contentEl : String
Optional. Specify an existing HTML element, or the id of an existing HTML element to use as this Panel's body content.
Description :
This config option is used to take an existing HTML element and place it in the body of a new panel (it simply moves the specified DOM element into the body element of the Panel after the Panel is rendered to use as the content (it is not going to be the actual panel itself).
Notes :
The specified HTML element is appended to the Panel's body Element by the Panel's afterRender method after any configured HTML has been inserted, and so the document will not contain this element at the time the render event is fired.
The specified HTML element used will not participate in any layout scheme that the Panel may use. It is just HTML. Layouts operate on child items.
Add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.
- items : Object/Array
** IMPORTANT: be sure to specify a layout if needed ! **
A single item, or an array of child Components to be added to this container, for example:
// specifying a single item
items: {...},
layout: 'fit', // specify a layout!
// specifying multiple items
items: [{...}, {...}],
layout: 'anchor', // specify a layout!
Each item may be:
-any type of object based on Ext.Component
- a fully instanciated object or
- an object literal that:
- has a specified xtype
- the Ext.Component.xtype specified is associated with the Component desired and should be chosen from one of the available xtypes as listed in Ext.Component.
- If an xtype is not explicitly specified, the defaultType for that Container is used.
- will be "lazily instanciated", avoiding the overhead of constructing a fully instanciated Component object
Notes:
Ext uses lazy rendering. Child Components will only be rendered should it become necessary. Items are automatically laid out when they are first shown (no sizing is done while hidden), or in response to a doLayout call.
Do not specify contentEl/ html with items.
So, there are two properties: contentEl - just dom element which moved inside panel's body (what inside that dom element the panel doesn't know and doesn't manage any controls which can be inside) and items collection contains controls which participate in layout logic (if you place control inside items that it is mean that you use layout, default layout is ContainerLayout). All controls inside items collection are managed by parent container (in others words by its layout logic)
When you place controls inside Content tag (or ContentControls) they are rendered into separated div and id of that div is passed as contentEl in the js config of the panel (the toolkit can detect that layout control (like FitLayout, AccordionLayout and etc) inside Content and can move layout's items inside Items collection)
So, when you should use Content (ContentControls)
- if you need to use none Ext.Net controls (for example, native ASP.NET controls)
- if need to use none standard layout (e.g. markup) (by the way, you use any html code as layout item, just use AutoEl inner property of the Container or Panel)
I believe that in all other cases you can use exisiting layouts and place controls inside Items collection
