1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    27
    Vote Rating
    0
    jojo3091 is an unknown quantity at this point

      0  

    Default Unanswered: afterBodyEl related query

    Unanswered: afterBodyEl related query


    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

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

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Have you considered modifying the fieldSubTpl attribute on the field?

    The base is

    Code:
    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..

  3. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,052
    Vote Rating
    215
    Answers
    484
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    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.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 2