How To Create a SPAN tag without a DIV?

[billtricarico]

Hello,

I am using the DomHelper to generate some HTML, but everything is getting wrapped in a DIV tag. I would like my parent tag to be a DIV (which it is) but I want the child tags to be SPAN tags only. It seems that ExtJS wraps everything in DIVs, even plain HTML.

Thanks.

[friend]

Try something like this:



Ext.DomHelper.append(Ext.getBody(), {
tag: 'div',
children: [{
tag: 'span 1',
html: 'Span 1'
},{
tag: 'span 2',
html: 'Span 2'
},{
tag: 'span 3',
html: 'Span 3'
}]
})

[billtricarico]

Using your example, having a parent <div> tag is fine. But each of the children <span> tags will be wrapped in yet another <div> tag. That's just unnecessary overhead in my opinion.

[mankz]

No, each span is not wrapped in any div. Try running this in Firebug.



<div>
<span 1="">Span 1</span>
<span 2="">Span 2</span>
<span 3="">Span 3</span>
</div>

[billtricarico]

Ok then the problem I am facing is that the children are actually Ext components. It's the fact that's it's a component that creates that outer <div> wrapper. I wanted some class-level functionality for my <span> tags, to treat them as individual objects. But extending Ext.Container wraps them in <div> tags.

Thanks.

[billtricarico]

How can I make those Ext.Component <div> tags be display:inline instead of display:block?

[evant]

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

[billtricarico]

@ evan... this looks exactly like what I need. Thanks!