Is there anyway to supress the autoEl of a component?

[dr-dan]

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.

Parent:


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

Child:

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

[evant]

That's not correct:



Ext.onReady(function() {

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

});


It's just a div with some markup.

[dr-dan]

OK but what if i just wanted the text Foo rendering not wrapped in a div?

[evant]

You can't. A text node has to go inside some element, whether it be the body or something else.

[dr-dan]

Well yeah, in my case a parent component

[dr-dan]

http://api.jquery.com/insertAfter/

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

[skirtle]

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.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-method-update