View Full Version : afterBodyEl related query

28 Jun 2013, 1:27 AM
I need to render a image beside component this is working fine for "textfield" but for combobox it is rendering bottom of the component.I am trying to use "afterBodyEl" config and below is my following code

var length=Ext.getCmp(id).bodyEl.dom.children.length console.log("The length i s"+length); for(var x=0;x<length;x++) { var tagid = 'myid'+i; console.log("the tag id is" + tagid); var abc = Ext.getCmp(id).bodyEl.dom.children[x]; Ext.DomHelper.insertAfter(abc, { id : 'tagid', tag : 'span', cls : 'np-info-field' }, true); } } } console.log(Ext.getCmp('check5')); var xyz=Ext.getCmp('check5').bodyEl.dom.children[0]; Ext.DomHelper.append(xyz, { id : 'mno', tag : 'span', cls : 'np-info-field' }, true)


.np-info-field { background-image: url("../images/u191_normal.png"); background-position: left center; background-repeat: no-repeat; margin-right: -22px; padding-right: 22px; vertical-align:top;}

This is my output .In the output for combo image is rendered bottom i need to render similar to "textfield".

28 Jun 2013, 2:02 AM
Have you considered modifying the fieldSubTpl attribute on the field?

The base is

fieldSubTpl: [
'<div class="{hiddenDataCls}" role="presentation"></div>',
'<input id="{id}" type="{type}" {inputAttrTpl} class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="size"> size="{size}"</tpl>',
'<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
compiled: true,
disableFormats: true

There are template atrributes for the labels as well..you could add images there..

30 Jun 2013, 6:58 PM
I think extending your own class and changing the tpl is the right way to go - that or you might consider using multiple components inside of a fieldcontainer (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.FieldContainer).