Paste the code blow inside Sencha fiddle. Look at the item that reads ProblemElement.
Ext.define('DropDownList', {
extend: 'Ext.form.ComboBox',
editable: false,
alias: 'widget.dropdownlist',
initComponent: function() {
this.callParent([arguments]);
},
onRender: function() {
this.callParent();
}
});
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [
{
"name": "Alabama"
},
{
"name": "Alaska"
},
{
"name": " <input value='ProblemElement'>"
}
]
});
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.form.Panel', {
items: [{
xtype: 'dropdownlist',
hideLabel: false,
title: 'ComboBox Test',
fieldLabel: 'Choose State',
store: states,
displayField: 'name',
htmlEncode: true,
renderTo: Ext.getBody()
}]
});
}
});
The problem I am facing is that the item displayed in the dropdown is being rendered as HTML. However after I select it it displays correctly as text (<input value='ProblemElement'>), the way I want it.
The dropdown list is actually a Boundlist, and how item text is displayed is controlled by its getInnerTpl method. You can customize the combo's dropdown with listConfig so that the inner text is passed through Ext.String.htmlEncode:
listConfig: {
getInnerTpl: function(displayField) {
return '{[Ext.String.htmlEncode(values.' + displayField + ')]}';
}
}
Full example: https://fiddle.sencha.com/#fiddle/rkk
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments