My treecolumn
has a ComboBox as the editor component. The choices in the options menu are rendered correctly with HTML, but the input box does not render HTML, it only shows the tags (See images below.)
How I can make it to also render the value as HTML?
P.S. This solution here EXTJS 4 render HTML of a selected value in a combobox is seems like not working with extjs6 version, check here
Here's the problem place code (rendere in case depth.TypeParameter:
returns text with html tags)
{
xtype: 'treecolumn',
dataIndex: 'text',
text: Poly.utils.locale.Base.localeName,
flex: 1,
getEditor: function (record) {
return me.getController().getEditor(record);
},
renderer: function (value, meta, record) {
var depth = Poly.view.fluidProperties.sample.Tree.depth;
switch (record.getDepth()) {
case depth.Temperature:
if (Ext.isEmpty(record.get('temperature'))) {
return value;
}
var text = Ext.String.format('T = {0} {1}',
record.get('temperature').toFixed(2),
Poly.utils.UniSum.GetUnit(me.getViewModel().get('temperatureUnitId')).name);
return text;
case depth.TypeParameter:
if (record.get('isNew')) {
return value;
}
return Poly.enums.TypeFluidParameter.getName(record.get('fluidParameter'), record.parentNode.get('typeFluid'), true);
}
return value;
}
}
Full code here
Ext.define('Poly.view.fluidProperties.sample.Tree', {
extend: 'Ext.tree.Panel',
xtype: 'fluidPropertiesSampleTree',
viewModel: {
type: 'fluidPropertiesSampleTreeViewModel'
},
controller: 'fluidPropertiesSampleTreeController',
statics: {
/** Уровень элемента в дереве */
depth: {
/** Корень */
Root: 0,
/** Замер */
Sample: 1,
/** Тип среды */
TypeFluid: 2,
/** Параметер */
TypeParameter: 3,
/** Температура */
Temperature: 4
}
},
lines: false,
rootVisible: false,
useArrows: true,
enableColumnHide: false,
enableColumnResize: false,
sortableColumns: false,
border: true,
viewConfig: {
cls: 'gridActionColumnHide'
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
cls: 'transparent',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [
{
xtype: 'button',
cls: 'pvt-chart-button',
text: '', // локализация в initComponent
flex: 2,
name: 'addSample',
margin: 2
},
{
xtype: 'button',
cls: 'pvt-chart-button',
text: '', // локализация в initComponent
flex: 1,
name: 'import',
disabled: true,
margin: 2
},
{
xtype: 'button',
cls: 'pvt-chart-button',
text: '', // локализация в initComponent
flex: 1,
name: 'export',
disabled: true,
margin: 2
}
]
}
],
listeners: {
checkchange: 'nodeCheckChange',
edit: 'edit'
},
plugins: {
ptype: 'cellediting',
clicksToEdit: 2
},
bind: {
selection: '{selectedRecord}'
},
initComponent: function () {
var me = this,
store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: []
}
}),
controller = me.getController();
me.dockedItems[0].items[0].text = me.locale.addSample;
me.dockedItems[0].items[1].text = me.locale.importText;
me.dockedItems[0].items[2].text = me.locale.exportText;
Ext.applyIf(me, {
store: store,
columns: [
{
xtype: 'treecolumn',
dataIndex: 'text',
text: Poly.utils.locale.Base.localeName,
flex: 1,
getEditor: function (record) {
return me.getController().getEditor(record);
},
renderer: function (value, meta, record) {
var depth = Poly.view.fluidProperties.sample.Tree.depth;
switch (record.getDepth()) {
case depth.Temperature:
if (Ext.isEmpty(record.get('temperature'))) {
return value;
}
var text = Ext.String.format('T = {0} {1}',
record.get('temperature').toFixed(2),
Poly.utils.UniSum.GetUnit(me.getViewModel().get('temperatureUnitId')).name);
return text;
case depth.TypeParameter:
if (record.get('isNew')) {
return value;
}
return Poly.enums.TypeFluidParameter.getName(record.get('fluidParameter'), record.parentNode.get('typeFluid'), true);
}
return value;
}
},
{
width: 30,
xtype: 'widgetcolumn',
name: 'menuWidgetcolumn',
widget: {
xtype: 'button',
margin: '5 0 0 0',
arrowCls: '',
width: 15,
height: 15,
style: {
'background-color': '000000',
'border-color': '000000'
},
menu: {
xtype: 'colormenu',
listeners: {
select: function (component, color) {
var button = component.up('button');
button.setStyle('background-color', color);
}
}
}
},
onWidgetAttach: function (column, widget, record) {
widget.setVisible(Ext.isNumber(record.get('temperature')));
}
},
{
xtype: 'actioncolumn',
width: 25,
items: [
{
handler: 'removeTreeItem',
getClass: function (v, meta, rec) {
if (!rec.get('isNew')) {
return 'poly-trash-icon';
}
return '';
},
getTip: function (v, meta, rec) {
if (!rec.get('isNew')) {
return 'Delete';
}
return '';
}
}
]
}
]
});
me.getSampleNode = controller.getSampleNode;
me.setTypeMode = Ext.bind(controller.setTypeMode, controller);
me.callParent(arguments);
}
});
I suppose that your editor is
combo
, by default combo (as well as many other components) display HTML as plain text.Example
I guess as workaround you could overrite
combo
(or any other component), i.e. change component<input>
element to<div>
. It will entail overrites of some methods (setValue()
for example).Html input element can't display HTML, so you need to change template add div. Div can be shown as an overlay over input.
Best way to achieve this is by extending ComboBox:
With that, some additional CSS is required:
Fiddle: https://fiddle.sencha.com/#fiddle/14mm