Why we need childEls in extjs - where to use this? -

Why we need childEls in extjs - where to use this? -

could please explain have utilize this? having 1 illustration of this, think why should set .css id or class in h1 tag? why need childels? , when utilize same techniques msg not working why?

1) why should utilize config? 2) use? 3) can't define .css class or id , out styling? 4) when utilize same technique msg, not working.

ext.onready(function () { // explicitly create 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 component have title property cmp.title.setstyle({color: "red"}); } } });

});

for mes used code.

ext.onready(function () { // explicitly create 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 component have title property cmp.title.setstyle({color: "red"}); cmp.msg.setstyle({color: "green"}); } } });

});

thank you!

when utilize childels config, constructor of component create reference childels items within component.

so lets main component has id of component-2020, template create

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

and because of childels config, every time phone call component.title or component.msg reference these specific elements , able utilize ext.dom.elements methods (described here: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/ext.dom.element) on them.

so much more useful replacing css

you alter afterrender method this:

listeners: { afterrender: function(cmp){ console.log(cmp); // after rendering component have 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. don't know why doesn't work you.

extjs