javascript - ExtJs:如何在 html 中使用变量

Question

我正在尝试创建一个使用选项卡的 ExtJS 应用程序。我希望能够为每个选项卡的相应容器设置 div id。

到目前为止我有这个:

Ext.define('EXT.view.tab.tabs', {
    extend: 'Ext.container.Container',
    xtype: 'tabs',
    controller: 'tabcontroller',

    layout: 'fit',
    config: {
        name: 'image'
    },
    items: [{
        xtype: 'container',
        html: '<div id="{name}"'
    }]
});

所以显然这是行不通的。如何在 HTML 中使用变量？

还有其他方法可以做到这一点吗？我显然在这里遗漏了一些东西。

感谢您的帮助。

Answer 1

由于您在config中设置名称，因此无法直接访问。为此，您需要使用 initComponent()方法。在方法内部，您可以像这样访问您的配置

this.getName()

在此Fiddle ，我使用 initComponent() 和 viewModel 创建了一个演示。

代码片段:

//Using initComponent method set the id dynamically
Ext.define('TabsView', {
    extend: 'Ext.container.Container',
    xtype: 'tabs',
    //controller: 'tabcontroller',

    layout: 'fit',

    config: {
        name: 'image',
        text: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
    },

    initComponent: function() {
        this.callParent();
        this.add([{
            xtype: 'container',
            html: `<div id=${this.getName()}>${this.getText()}</div>`
        }])
    }
});

Ext.create({
    xtype: 'tabs',
    renderTo: Ext.getBody()
});

您还可以通过 viewModel 实现相同的功能

代码片段:

//Using viewModel
Ext.define('TabsView1', {
    extend: 'Ext.panel.Panel',
    xtype: 'tabs1',
    title: 'Using Viewmodel',
    layout: 'fit',
    margin: '20 0',
    bodyPadding: 10,

    viewModel: {
        data: {
            name: 'image',
            text: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
        }
    },

    items: [{
        xtype: 'container',
        bind: '<div id={name}>{text}</div>'
    }]
});

Ext.create({
    xtype: 'tabs1',
    renderTo: Ext.getBody()
});