View Full Version : Is there anyway to supress the autoEl of a component?

26 Oct 2012, 3:02 AM
I am bemused about the assumption that all Components must be wrapped in some tag (autoEl: default div)

This is screwing up my css. Is there anyway to suppress the autoEl, or is there another base class I can use? I would have thought this was a common scenario:

A parent component renders some markup (via a template), loads another component which is a template-generated html fragment (not an element/node) and injects the child html into one of its own tags/containers.

I have some list items in the parent, i want to inject a reusable sub-menu into one of the list items, which is a href followed by a new ul. but with the autoEl div component wrapped around it, it blows my supplied css.


renderTpl: [
'<ul class="info">',
''<li id="cultureMenu-li" class="lang"></li>'


renderTpl: [
'<a href="#" class="langitem">{currentCultureText}</a>',
'<tpl for="otherCultures">',
'<li><a href="/Locale/{code}">{text}</a>',

26 Oct 2012, 3:04 AM
That's not correct:

Ext.onReady(function() {

Ext.create('Ext.Component', {
html: 'Foo',
renderTo: document.body


It's just a div with some markup.

26 Oct 2012, 3:15 AM
OK but what if i just wanted the text Foo rendering not wrapped in a div?

26 Oct 2012, 3:20 AM
You can't. A text node has to go inside some element, whether it be the body or something else.

26 Oct 2012, 3:25 AM
Well yeah, in my case a parent component

26 Oct 2012, 3:27 AM

a (http://api.jquery.com/insertAfter/) parent (div) wants to call a component that renders an href + a list into itself, after xy element

26 Oct 2012, 12:05 PM
All components must have an outermost element, much of the framework would fall down if that assumption wasn't in place.

However, from what you've said it sounds like you don't actually want a child component. Just inject your HTML into the parent component directly. There are dozens of methods for doing this kind of thing between the Element and XTemplate classes, though possibly a tpl (not renderTpl) used in conjunction with data or update would be most appropriate in your case.