ExtJS 6.x(6.5.2)现代自定义组件

时间:2017-11-23 08:10:12

标签: javascript extjs extjs6-modern

我想在ExtJS 6.5.2 Modern中创建一个自定义组件。没有任何文档明确说明如何执行此操作。

自定义组件是在div中创建链接...例如

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

哪会产生**<div><a href="http://www.google.com#test/test/test">example-text</a></div>**

  1. 我应该如何构建自定义组件?
  2. 为什么在下面的示例中设置config.template不起作用? 构造函数不是先运行吗?
  3. 我应该如何更新该自定义组件的参数?
  4. 下面的调试和示例代码:

    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'
                }]
            });;
        }
    });
    

1 个答案:

答案 0 :(得分:2)

这样的事情:

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

用法:

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