PDA

View Full Version : afterBodyEl related query



jojo3091
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)

MY CSS CODE


.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".

tvanzoelen
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..

slemmon
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).