PDA

View Full Version : How To Create a SPAN tag without a DIV?



billtricarico
6 Aug 2012, 7:47 AM
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
6 Aug 2012, 10:38 AM
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
6 Aug 2012, 12:27 PM
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
6 Aug 2012, 12:33 PM
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
6 Aug 2012, 12:43 PM
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
6 Aug 2012, 1:24 PM
How can I make those Ext.Component <div> tags be display:inline instead of display:block?

evant
6 Aug 2012, 1:42 PM
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-autoEl

billtricarico
6 Aug 2012, 2:41 PM
@ evan... this looks exactly like what I need. Thanks!