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