extjs4 - ExtJS 4: What is the Proper Way to Perform Inheritance -
my code:
ext.onready(function() { // every property declared inside class ext.define('mycustompanel1', { extend: 'ext.panel.panel', alias: 'mycustompanel1', title: 'i custom panel 1', html: 'this content of custom panel 1', renderto: ext.getbody() }); ext.define('mycustompanel2', { // html declared inside class, title inside config, constructor overridden extend: 'ext.panel.panel', alias: 'mycustompanel2', renderto: ext.getbody(), html: 'this content of custom panel 2', config: { title: 'i custom panel 2' }, constructor: function(config) { this.callparent(arguments); this.initconfig(config) } }); ext.define('mycustompanel3', { // title , html declared inside config, constructor overridden extend: 'ext.panel.panel', alias: 'mycustompanel3', renderto: ext.getbody(), config: { title: 'i custom panel 3', html: 'this content of custom panel 3' }, constructor: function(config) { this.callparent(arguments); this.initconfig(config) } }); ext.define('mycustompanel4', { // title , html inside of initcomponent, title override in instance declaration doesn't hold. html property empty on render extend: 'ext.panel.panel', alias: 'mycustompanel4', renderto: ext.getbody(), initcomponent: function(config) { ext.apply(this, { title: 'i custom panel 4', html: 'this content of custom panel 4' }) this.callparent(arguments); } }); ext.define('mycustompanel5', { // title declared inside config, html set inside of initcomponent. both initcomponent , constructor used. extend: 'ext.panel.panel', alias: 'mycustompanel5', renderto: ext.getbody(), config: { title: 'i custom panel 5' }, constructor: function(config) { this.callparent(arguments); this.initconfig(config); }, initcomponent: function(config) { ext.apply(this, { html: 'this content of custom panel 5' }) this.callparent(arguments); } }); ext.create('mycustompanel1', { title: 'i custom panel 1 - instance!', html: 'this content of custom panel 1 - instance!' }) ext.create('mycustompanel2', { title: 'i custom panel 2 - instance!', html: 'this content of custom panel 2 - instance!' }) ext.create('mycustompanel3', { title: 'i custom panel 3 - instance!', html: 'this content of custom panel 3 - instance!' }) ext.create('mycustompanel4', { title: 'i custom panel 4 - instance!', html: 'this content of custom panel 4 - instance!' }) ext.create('mycustompanel5', { title: 'i custom panel 5 - instance!', html: 'this content of custom panel 5 - instance!' })
})
results (via jsfiddle.net): http://jsfiddle.net/htptt/
which of above methods correct way create object extending existing object? advantages , disadvantages of each? can find further information on extjs 4 inheritance other here (http://docs.sencha.com/ext-js/4-0/#/guide/class_system)?
thanks,
i asked question on sencha forum , here's answer got saki:
whether use constructor or initcomponent while extending depends on want do. initcomponent run parent constructor anyway, later, after internal variable have been initialized, in cases want that, not.
in no case use renderto in ext.define because causes component rendered after instantiation , not want. also, initconfig should come before parent call in constructors, otherwise it's useless config has been inited in parent call.
you may want read "writing big..." in signature. document written previous version of ext code examples not apply anymore principles same.
Comments
Post a Comment