我想在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>**我应该如何构建自定义组件？
为什么在下面的示例中设置config.template不起作用？
构造函数是否不首先运行？
我应该如何更新该自定义组件上的参数？
下面的调试和示例代码：
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'
}]
});;
}
});
最佳答案
像这样：
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