Why do we need childEls in extjs - where to use it?
Could you please explain what I should be using this for? I have one example of this, but I think why should we just set the .css ID or CLASS for this in the h1 tag? Why do we need this childEls ? And when I use the same methods for msg it doesn't work, why?
1) Why should we use this configuration? 2) Where to use? 3) Can't we define the .css class or id and style? 4) When I use this method for msg it doesn't work.
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"});
}
}
});
});
For mes, I used this code.
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"});
}
}
});
});
Thank!
source to share
When you use config childEls
, your component's constructor will create a link to your childEls inside the component.
So let's say your main component has an id component-2020
, your template will create
<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>
And now, due to the childEls config, every time you call component.title or component.msg you will get a link to those specific elements and can use all the methods Ext.dom.Elements
(described here: http://docs.sencha.com/extjs/5.0/ apidocs / #! / api / Ext.dom.Element ) on them.
So it is much more useful than just replacing CSS
You can change your afterrender method to something like this:
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"});
}
}
- Your msg block should work fine. I don't know why this doesn't work for you.
source to share