ComboBox显示HTML作为文本 [英] ComboBox showing HTML as text
本文介绍了ComboBox显示HTML作为文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的 treecolumn 有一个ComboBox作为编辑器组件。选项菜单中的选项使用HTML进行正确渲染，但输入框不显示HTML，仅显示标签（见下图）。
我如何使它还能将值作为HTML呈现？
PS
这个解决方案在这里
这里是问题的地方代码（在 depth.TypeParameter：中使用rendere返回带html标签的文本）
{
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）;
返回文本;
case depth.TypeParameter：
if（record.get（'isNew'））{
返回值;
}
返回Poly.enums.TypeFluidParameter.getName（record.get（'fluidParameter'），record.parentNode.get（'typeFluid'），true）;
}
返回值;
}
}
全部代码在这里
Ext.define（'Poly.view.fluidProperties.sample.Tree'，{
extends：'Ext.tree.Panel'，
xtype：'fluidPropertiesSampleTree'，
viewModel：{
type：'fluidPropertiesSampleTreeViewModel'
}，
控制器：'fluidPropertiesSampleTreeController' ，
静态：{
/ **Уровеньэлементавдереве* /
深度：{
/ **Корень* /
根：0，
/ **Замер* /
示例：1，
/ **Типсреды* /
TypeFluid：2，
/ **Параметер* /
TypeParameter：3，
/ **Температура* /
温度：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，
名称：'import'，
disabled：true，
margin：2
}，
{
xtype：'button'，
cls：' pvt-chart-button'，
text：''，//локализациявinitComponent
flex：1，
name：'export'，
disabled：true，
边距：2
}
]
}
]，
listeners：{
checkchange：'nodeCheckChange'，
编辑：'edit'
}，
plugins：{
ptype：'cellediting'，
clicks ToEdit：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'）））{
返回值;
}
var text = Ext.String.format（'T = {0 } {1}'，
record.get（'temperature'）。toFixed（2），
Poly.utils.UniSum.GetUnit（me.getViewModel（）。get（'temperatureUnitId'））。名称）;
返回文本;
case depth.TypeParameter：
if（record.get（'isNew'））{
返回值;
}
返回Poly.enums.TypeFluidParameter.getName（record.get（'fluidParameter'），record.parentNode.get（'typeFluid'），true）;
}
返回值;
}
}，
{
宽度：30，
xtype：'widgetcolumn'，
名称：'menuWidgetcolumn'，
小部件： {
xtype：'button'，
margin：'5 0 0 0'，
arrowCls：''，
width：15，
height：15，
样式：{
'background-color'：'000000'，
'border-color'：'000000'
}，
菜单：{
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。获得（ '温度'）））;
}
}，
{
xtype：'actioncolumn'，
width：25，
items：[
{
处理程序：'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）;
}
}）;
解决方案
Html输入元素无法显示HTML，所以你需要更改模板添加div。 Div可以显示为输入的重叠。
通过扩展ComboBox，最好的方法是：
Ext.define（'HtmlComboBox'，{
extends：'Ext.form.field.ComboBox'，
fieldSubTpl：[// note：{id} here真的{inputId}，但{cmpId}可用
'< input id ={id}data-ref =inputEltype ={type}{inputAttrTpl}'，
' size =1'，//允许输入完全遵守所有浏览器的CSS宽度
'< tpl if =name> name ={name}< / tpl>'，
'< tpl if =value> value ={[Ext.util.Format.htmlEncode（values.value）]}< / tpl>'，
'< tpl if = placeholder> placeholder ={placeholder}< / tpl>'，
'{％if（values.maxLength！== undefined）{％} maxlength ={maxLength}{％}％ }'，
'< tpl if =readOnly> readonly =readonly< / tpl>'，
'< tpl if =disabled> isabled =disabled< / tpl>'，
'< tpl if =tabIdx！= null> tabindex ={tabIdx}< / tpl>'，
'< tpl if =fieldStyle> style ={fieldStyle}< / tpl>'，
'< tpl foreach =inputElAriaAttributes> {$} ={。}< / tpl>'，
'class ={fieldCls} {typeCls} {typeCls} - {ui} {editableCls} {inputCls}autocomplete =off >'，
// overlay元素显示格式化值
'< div id ={cmpId} -overlayEldata-ref =overlayEl< tpl if =name>名称= {名称} -overlayEl < / TPL> class ={fieldCls} -overlay {typeCls} {typeCls} - {ui} {inputCls}> {value}< / div>'，
{
disableFormats：true
]，
forceSelection：true，
childEls：[
'overlayEl'
]，
setRawValue：function （value）{
var me = this;
//设置重叠值
if（me.rendered）{
me.overlayEl.update（value）;
}
return me.callParent（[value]）;
}
}）;
需要一些额外的CSS：
.x-form-text-wrap {
position：relative;
}
.x-form-field-overlay {
background-color：#ffffff;
position：absolute;
顶部：0;
}
小提琴： https://fiddle.sencha.com/#fiddle/14mm
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);
}
});
解决方案
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:
Ext.define('HtmlComboBox', {
extend: 'Ext.form.field.ComboBox',
fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
'<input id="{id}" data-ref="inputEl" type="{type}" {inputAttrTpl}',
' size="1"', // allows inputs to fully respect CSS widths across all browsers
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx != null"> tabindex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl foreach="inputElAriaAttributes"> {$}="{.}"</tpl>',
' class="{fieldCls} {typeCls} {typeCls}-{ui} {editableCls} {inputCls}" autocomplete="off"/>',
// overlay element to show formatted value
'<div id="{cmpId}-overlayEl" data-ref="overlayEl"<tpl if="name"> name="{name}-overlayEl"</tpl> class="{fieldCls}-overlay {typeCls} {typeCls}-{ui} {inputCls}">{value}</div>',
{
disableFormats: true
}
],
forceSelection: true,
childEls: [
'overlayEl'
],
setRawValue: function(value) {
var me = this;
// set value in overlay
if (me.rendered) {
me.overlayEl.update(value);
}
return me.callParent([value]);
}
});
With that, some additional CSS is required:
.x-form-text-wrap {
position: relative;
}
.x-form-field-overlay {
background-color: #ffffff;
position: absolute;
top: 0;
}
Fiddle: https://fiddle.sencha.com/#fiddle/14mm
这篇关于ComboBox显示HTML作为文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
