extjs modern6.2的 displayfield

https://www.sencha.com/forum/showthread.php?335280-extjs-6-2-modern-alternative-to-displayfield

 

Ext.define('MyPackage.field.display.Field', {
    extend   : 'Ext.field.Field',
    xtype    : 'displayfield',
    requires : [
        'MyPackage.field.display.Component'
    ],
    config   : {
        component : {
            xtype : 'displayfieldcomponent'
        }
    },
    setValue : function (value) {
        var me = this;
        if (!Ext.isEmpty(me.renderer)){
            value = me.renderer(value);
        }
        me.getComponent().displayElement.setHtml(value);
        return me;
    }
});


Ext.define('MyPackage.field.display.Component', {
    extend      : 'Ext.Component',
    xtype       : 'displayfieldcomponent',
    config      : {
        cls : 'x-field-input'
    },
    getTemplate : function () {
        return [
            {
                reference : 'displayElement',
                tag       : 'div',
                style     : 'padding:10px'
            }
        ];
    }
});