标签字段与html编码的displayField在Extjs 6

Tagfield with html encoded displayField in Extjs 6

本文关键字：displayField Extjs 编码 字段 html 标签      更新时间：2023-09-26

在升级到Extjs 6之前，我们使用的是tagfield组件，其displayField是Ext.String.htmlEncode('description')，其中description是商店记录的描述字段。该字段不仅包含简单的文本，而且采用:<img src="link..." style="..."/>&nbspRECORD_DESCRIPTION的形式。使用htmlEncode函数，它将实际呈现带有链接图像和记录描述的标记字段的记录。

然而，升级到版本6后，这停止工作。它现在只生成全文，而不是渲染图像。就像htmlEncode突然停止工作一样。问题是，在ItemSelector领域，我们做同样的事情，一切都完美地使用完全相同的方法。他们是否破坏了tagfield组件，以便无法显示html?

不管怎样，我怎样才能重现我以前所做的?我尝试了displayTpl配置，但它似乎不工作。

代替Ext.String.htmlEncode('description')尝试'description'在displayField。DisplayField影响您在选择时看到的内容，为此，它将显示您的HTML。它还会影响显示所做选择的方式，而且似乎没有办法在那里显示HTML。它显示为纯文本。还有另一个属性labelTpl，用于格式化您已经选择的项。您可以使用它来显示您已经选择的内容的名称。(LabelTpl用于显示格式化的HTML，但在ExtJs6中没有。)假设你的商店记录也有一个纯文本的'name'字段;你可以把它放在花括号里:

xtype:'tagfield',
displayField: 'description',
labelTpl: '{name}',
...

那么您将在进行选择时获得格式化的HTML，以及所选项目中的纯文本。

使用ExtJS 6.5.3

在为列表和标签创建复杂的显示语句方面，这是我所能找到的最好的标签字段。

显示支持CSS和其他HTML标记labelTpl除了纯文本之外不支持任何内容，但是您可以覆盖它的x-tagfield-item-text样式。

{
            cls: "triggerstagfield",
            displayField: '[(values.key != "all") ? values.label + " (<b>" + values.key + "</b>)" : values.label]',
            labelTpl: '{[(values.key != "all") ? values.label + " (" + values.key + ")" : values.label]}',
            valueField: "key",
            store: [{
                "key": "all",
                "label": "All"
            }, {
                "key": "880",
                "label": "International House of Pancakes" 
            }]                      
        },

这是CSS

.triggerstagfield .x-tagfield-item-text {
    font-weight: bold;
    font-size: 0.9em;   
}

我通过扩展内置标记字段来解决这个问题，覆盖函数getMultiSelectItemMarkup。在该函数中，我删除了对标签上的ext . string . htmlcode的调用。

可以使用

{ 
  xtype: 'tagfieldhtmllabel',
  labelTpl: '<span style="background-color:#{colorbg};">{name}</span>',
  ...
}

这是Ext 6.2.1

上的代码
Ext.define("Private.ui.TagFieldHtmlLabel", {
    extend: 'Ext.form.field.Tag',
    alias: 'widget.tagfieldhtmllabel',
    // TODO EXT UPGRADE. WHEN UPGRADING FROM 6.2.1 update this
    getMultiSelectItemMarkup: function() {
        var me = this,
            childElCls = (me._getChildElCls && me._getChildElCls()) || '';
        // hook for rtl cls
        if (!me.multiSelectItemTpl) {
            if (!me.labelTpl) {
                me.labelTpl = '{' + me.displayField + '}';
            }
            me.labelTpl = me.lookupTpl('labelTpl');
            if (me.tipTpl) {
                me.tipTpl = me.lookupTpl('tipTpl');
            }
            me.multiSelectItemTpl = new Ext.XTemplate([
                '<tpl for=".">',
                '<li data-selectionIndex="{[xindex - 1]}" data-recordId="{internalId}" role="presentation" class="' + me.tagItemCls + childElCls,
                '<tpl if="this.isSelected(values)">',
                ' ' + me.tagSelectedCls,
                '</tpl>',
                '{%',
                'values = values.data;',
                '%}',
                me.tipTpl ? '" data-qtip="{[this.getTip(values)]}">' : '">',
                '<div role="presentation" class="' + me.tagItemTextCls + '">{[this.getItemLabel(values)]}</div>',
                '<div role="presentation" class="' + me.tagItemCloseCls + childElCls + '"></div>',
                '</li>',
                '</tpl>',
                {
                    isSelected: function(rec) {
                        return me.selectionModel.isSelected(rec);
                    },
                    getItemLabel: function(values) {
                        // UPGRADE - removed htmlEncode here
                        return me.labelTpl.apply(values);
                    },
                    getTip: function(values) {
                        return Ext.String.htmlEncode(me.tipTpl.apply(values));
                    },
                    strict: true
                }
            ]);
        }
        if (!me.multiSelectItemTpl.isTemplate) {
            me.multiSelectItemTpl = this.lookupTpl('multiSelectItemTpl');
        }
        return me.multiSelectItemTpl.apply(me.valueCollection.getRange());
    }

});
相关文章：