Question

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

1）我们为什么要使用这个配置？ 2）在哪里使用？ 3）我们不能定义.css类或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"});
    }
}

你的msg块应该可以正常工作。我不知道为什么它不适合你。

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

1 个答案: