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

时间:2017-06-13 20:51:41

标签: javascript extjs

我想用一些自定义模板创建自定义组件。我希望这个模板有一些参数。现在我的代码看起来像这样:

    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时,我知道我可以使用renderTplgetTemplateArgs(),当我扩展DataView时,我可以在构造函数中配置模板。但是当我延伸Component时,所有这些都不起作用。那么,这有什么问题,我该如何解决?

2 个答案:

答案 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)

tpldata配置一起使用。

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