在extjs textfield中如何动态更改afterSubTpl？

Question

I am facing problem in dynamically changing afterSubTpl that I have used in textfield . Is there any way that I can change afterSubTpl

Answer 1

Here is a working fiddle

Create element:

{
  xtype: 'textfield',
  id: 'mytextfield',
  fieldLabel : 'Text',
  afterSubTpl: ['<div id="{id}-title" data-ref="title">afterSubTpl</div>'],
  childEls: ['title']


}

Select listener of combo box:

'select': function(cmb, selected) {
  var textField = Ext.getCmp('mytextfield');
  textField.title.setHtml('<div>new afterSubTpl' + selected.data.name + '</div>');
  textField.title.setStyle({color: "red"});   
}

It uses the childEls logic to reference the HTML DOM Element which was created based on the afterSubTpl config. Within the 'select' listener of the combo box the element which was added within the childEls is used to update the HTML content. This Ext.dom.Element can be manipulated according to Sencha Doc