ExtJS 6.x (6.5.2) Modern Custom Component

Question

I would like to create a custom component in ExtJS 6.5.2 Modern. None of the documentation makes it clear how to do this.

The custom component is to create a link within a div... e.g.

{
    xtype: 'test-link',
    urlPart: 'http://www.google.com',
    hashPart: '#test/test/test',
    text: 'example-text'
}

Which will produce **<div><a href="http://www.google.com#test/test/test">example-text</a></div>**

1. How am I supposed to build a custom component?
2. Why does setting config.template not work in the example below? Does the constructor not run first?
3. How am i supposed to update parameters on that custom component?

Debugging and Example code below:

Ext.application({
    name : 'Fiddle',

    launch : function() {
         Ext.define('LinkTest', {
           extend: 'Ext.Component',
             xtype: 'test-link',

             // looks like parameters go here
             // config: {

             // },

             // No idea what cached config is for
             // cachedConfig: {

             // },


             constructor: function(config) {
                console.log('STEP 1. constructor - at start')
               // This returns the config so we know it works
                 console.log(config.urlPart, config.hashPart, config.text)

                 // Just an example of a dynamic configuration option
                 // we may have to do in the setup process
                 config.href = config.urlPart + config.hashPart

                 // This doesn't work even though it works if done inline
                 // this makes no sense to me, because AFAIK adding stuff onto
                 // the config here should be identical as directly creating 
                 // it.


                 config.template = [
                  {
                    tag: 'a',
                    text: config.text,
                    href: config.href,
                    refence: 'anchorTag'
                  }
                 ]

                 //### THis also doesn't work
                 //  config.template = [
               //   {
               //     tag: 'a',
               //     text: 'test.com text',
               //     href: 'htts://test.com/url',
               //     reference: 'anchorTag'
               //   }
               // ]



                 console.log('STEP 2. constructor - before callParent')
                 this.callParent(arguments)
                 console.log('STEP 3. constructor - before callParent')

             },

             // THIS CODE WORKS BUT IS NOT DYNAMICALLY GENERATED
             // so commented out for now
             // template: [
             //   {
             //     tag: 'a',
             //     text: 'test.com text',
             //     href: 'htts://test.com/url',
             //     reference: 'anchorTag'
             //   }
             // ],

             initialize: function() {
              console.log('STEP 3. initialize - at start')
              console.log('template', this.template)
              console.log('in initialize', this.href) // << works returns the full url

             }
         })


        Ext.Viewport.add({
            xtype: 'panel',
            layout: 'fit',
            title: 'Example',
            items: [{
                xtype: 'test-link',
                urlPart: 'http://www.google.com',
                hashPart: '#test/test/test',
                text: 'example-text'
            }]
        });;
    }
});

Answer 1

Something like this:

Ext.define('Link', {
    extend: 'Ext.Component',
    xtype: 'link',

    element: {
        reference: 'element',
        tag: 'a'
    },

    config: {
        url: null,
        hash: null,
        text: null
    },

    updateUrl: function () {
        this.computeUrl();
    },

    updateHash: function () {
        this.computeUrl();
    },

    updateText: function (text) {
        this.el.dom.innerText = text;
    },

    computeUrl: function () {
        var url = this.getUrl() || '',
            hash = this.getHash() || '';

        this.el.dom.href = url + hash;
    }
});

Usage:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Viewport.add({
            xtype: 'container',
            items: [{
                xtype: 'link',
                url: 'google.com',
                text: 'Link only'
            }, {
                xtype: 'link',
                hash: '#foo',
                text: 'Hash Only'
            }, {
                xtype: 'link',
                url: 'google.com',
                hash: '#foo',
                text: 'Both'
            }]
        });
    }
});

Fiddle