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

Question

你能解释一下我必须使用这个吗？我有一个这样的例子，但我想为什么我们只需在h1标签中设置.css ID或CLASS？为什么我们需要这个孩子们？？而当我使用相同的技术为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项目的引用。

因此，可以说你的主要成分为component-2020一个ID，你的模板将创建

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

• 你味精块应该只是罚款。我不知道为什么它不适合你。