爲什麼我們需要在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"}); 
    } 
} 

• 你味精塊應該只是罰款。我不知道爲什麼它不適合你。