javascript - 如何设置自定义组件模板并传递模板参数？

Question

我想使用一些自定义模板创建自定义组件。我希望这个模板有一些参数。现在我的代码如下所示:

    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 时，这一切都不起作用。那么，这有什么问题以及如何解决它？

Answer 1

您需要在 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