2

在升级到 Extjs 6 之前，我们使用了一个tagfield组件，它displayField的Ext.String.htmlEncode('description')位置description是商店记录的描述字段。该字段不仅包含简单的文本，而是采用以下形式：<img src="link..." style="..."/>&nbspRECORD_DESCRIPTION。使用该htmlEncode函数，它实际上会使用链接的图像和记录的描述来呈现标签字段的记录。

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

无论如何，我怎样才能重现我之前所做的事情？我尝试了displayTpl配置，但它似乎不起作用。

4

3 回答 3

0

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

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

然后，您将在进行选择时获得格式化的 HTML，并在所选项目中获得纯文本。这是迄今为止我想出的最好的。

于 2017-01-30T18:35:42.533 回答
0

使用 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;   
}
于 2018-02-23T02:01:00.150 回答
0

我通过扩展内置标签字段来解决它，覆盖函数 getMultiSelectItemMarkup。在该函数中，我删除了标签上对 Ext.String.htmlEncode 的调用。

有了这个，你可以使用

{ 
  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());
    }


});
于 2018-10-30T09:43:01.363 回答