extjs - 为什么我们需要 extjs 中的 childEls - 在哪里使用它？

Question

你能解释一下我必须使用这个吗？我有一个这样的例子，但我认为我们为什么要在 h1 标签中为它设置 .css ID 或 CLASS？为什么我们需要这个 childEls？当我对 msg 使用相同的技术时，为什么不起作用？

1) 我们为什么要使用这个配置？ 2)在哪里使用？ 3) 我们不能定义 .css class 或 id 和样式吗？ 4) 当我对 msg 使用同样的技术时，它不起作用。

Ext.onReady(function () {
// Explicitly create a Container
Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 id="{id}-title" data-ref="title">{title}</h1>',
        '<p>{msg}</p>',
    ],
    renderData: {
        title: "Error",
        msg: "Something went wrong"
    },
    childEls: ["title"],
    listeners: {
        afterrender: function(cmp){
            console.log(cmp);
            // After rendering the component will have a title property
            cmp.title.setStyle({color: "red"});
        }
    }
});

});

对于 mes，我使用了这段代码。

Ext.onReady(function () {
// Explicitly create a Container
Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 id="{id}-title" data-ref="title">{title}</h1>',
        '<p id="{id}-msg" data-ref="msg">{msg}</p>',
    ],
    renderData: {
        title: "Error",
        msg: "Something went wrong"
    },
    childEls: ["title","msg"],
    listeners: {
        afterrender: function(cmp){
            console.log(cmp);
            // After rendering the component will have a title property
            cmp.title.setStyle({color: "red"});
            cmp.msg.setStyle({color: "green"});
        }
    }
});

});

谢谢!

Answer 1

当您使用 childEls 配置时，组件的构造函数将在组件内创建对 childEls 项的引用。

假设您的主要组件的 ID 为 component-2020，您的模板将创建

<h1 id="component-2020-title" data-ref="title">content of your renderData.title</h1>
<p id="component-2020-msg" data-ref="msg">content of your renderData.title</p>

现在因为你的 childEls 配置，每次你调用 component.title 或 component.msg 您将获得对这些特定元素的引用，并将能够对它们使用所有 Ext.dom.Elements 方法(此处描述:http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.dom.Element)。

所以它比仅仅替换 CSS 有用得多

您可以将您的 afterrender 方法更改为如下所示:

listeners: {
    afterrender: function(cmp){
        console.log(cmp);
        // After rendering the component will have a title property
        cmp.title.setStyle({color: "red"});
        cmp.title.fadeOut({duration: 2000}).fadeIn({duration: 2000});
        cmp.msg.setStyle({color: "green"});
    }
}

• 您的消息 block 应该可以正常工作。我不知道为什么它对你不起作用。