2

Extjs 6 にアップグレードする前は、ストアのレコードの説明フィールドがどこにあるかというtagfieldコンポーネントを使用していました。このフィールドには単純なテキストが含まれているだけでなく、次の形式になっています。この関数を使用すると、タグフィールドのレコードがリンクされた画像とレコードの説明とともに実際にレンダリングされます。displayFieldExt.String.htmlEncode('description')description<img src="link..." style="..."/>&nbspRECORD_DESCRIPTIONhtmlEncode

ただし、バージョン 6 にアップグレードした後、これは機能しなくなりました。画像をレンダリングする代わりに、全文を生成するだけになりました。そのようなものhtmlEncodeは突然機能しなくなりました。問題はItemSelector、私たちが同じことを行う分野では、まったく同じ方法を使用してすべてが完全に機能するということです。tagfieldhtml を表示できないようにコンポーネントを壊したのでしょうか。

とにかく、以前に行ったことをどのように再現できますか? configで試してみましdisplayTplたが、うまくいかないようです。

4

3 に答える 3

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 に答える