我想用一些自定义模板创建自定义组件。我希望这个模板有一些参数。现在我的代码看起来像这样:
Ext.define('Ext.ux.TestComponent', {
extend:'Ext.Component',
alias: 'widget.testcomponent',
requires: [
'Ext.XTemplate'
],
constructor: function(config) {
Ext.applyIf(config, {
tpl: [
'<div class="custom_cls" custom_attr="{custom_attr_value}">Hello world</div>',
{compiled: true}
]
});
this.callParent([config]);
}
});
Ext.create("Ext.ux.TestComponent",{
renderTo: document.getElementById("component")
});
这是带有此代码的fiddle。此代码的第一个问题是我的自定义模板根本不会呈现。第二个问题是,我不知道如何将参数传递给此模板(并在我的示例中设置custom_attr
)。例如,当我扩展Button
时,我知道我可以使用renderTpl
和getTemplateArgs()
,当我扩展DataView
时,我可以在构造函数中配置模板。但是当我延伸Component
时,所有这些都不起作用。那么,这有什么问题,我该如何解决?
答案 0 :(得分:2)
您需要在renderTpl
配置中定义模板
可以通过renderData
应用其他数据。
Ext.define('Ext.ux.TestComponent', {
extend: 'Ext.Component',
renderTpl: [
'<div class="custom_cls" custom_attr="{custom_attr_value}">Hello</div>'
],
renderData: {
custom_attr_value: "TestValue"
}
});
以下是完整的例子:
https://fiddle.sencha.com/#view/editor&fiddle/21eg
作为移交renderData
对象的替代方法,您可以在组件中实现initRenderData
函数。
该函数由mixin Ext.util.Renderable
调用,由Ext.Component
使用。
Ext.define('Ext.ux.TestComponent', {
extend: 'Ext.Component',
renderTpl: [
'<div>{title}</div>'
],
config: {
title: 'default',
},
initRenderData() {
return this;
},
});
Ext.create("Ext.ux.TestComponent", {
renderTo: Ext.getBody(),
title: 'TestTitle'
});
以下是此替代解决方案的完整示例:
https://fiddle.sencha.com/#view/editor&fiddle/21en
答案 1 :(得分:2)
tpl
与data
配置一起使用。
Ext.define('Ext.ux.TestComponent', {
extend: 'Ext.Component',
tpl: [
'<div class="custom_cls" custom_attr="{custom_attr_value}">{content}</div>'
]
});
Ext.create("Ext.ux.TestComponent", {
renderTo: document.body,
data: {
custom_attr: 'x',
content: 'y'
}
});