What is the difference between applyTo and contentEl in extJS? They are two config properties of the panel.
3
votes
2 Answers
7
votes
applyTo renders the panel into a target element (the panel body could still contain any content), contentEl uses the target element as its body content (the panel could still be rendered to any other element). The two methods are unrelated.
Edit: Just a note that as of Ext 4.0+ the applyTo config no longer exists. As time went on, the declarative / progressive enhancement strategy became less viable for Ext (it never was fully supported in all components anyway), and they finally stopped supporting it. You would always use renderTo now (to render programmatically to a target element), whereas contentEl is still valid and still indicates the element from which to take content and add it into the panel's body.contentEl is most useful when you have some existing HTML on the page that you want to display inside a Panel component without having to reproduce the content markup in JS code.
While I'm here, I suppose I'll clarify something else... It's important to understand that renderTo is typically only used by the top-most container in an application layout. All child components should always be added as items to a Container -- rendering child components directly to a target element via renderTo means that those components will not participate in the Ext-managed layout system, which you typically do NOT want in an application.
Another difference is that every component in Ext supports renderTo, but only certain components (most usefully Panel) will honor contentEl in a meaningful way. Even though contentEl is defined on AbstractComponent, most components are not designed to handle arbitrary HTML content.
