The best way to create custom component

[Ex_Soft]

Method# 1


Ext.define("CustomPanel", {
extend: "Ext.panel.Panel",
alias : "widget.custompanel",

constructor: function(config) {
config = config || {};

Ext.applyIf(config, {
buttons: [
{
text: "Button# 1"
}
]
});

this.listeners = config.listeners;

this.callParent([config]);

this.addListener("beforeadd", function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.beforeadd(%o)", arguments);
});

return this;
},

initComponent: function() {
Ext.apply(this, {
tbar: {
items: [
{
xtype: "button",
text: "TBar Button #1 (Add)",
handler: function(btn, e) {
this.add({ xtype: "button", text: "AddedButton" });
},
scope: this
}
]
}
});

this.addListener("afterrender", function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.afterrender(%o)", arguments);
});

this.callParent(arguments);

this.addListener("beforerender", function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.beforerender(%o)", arguments);
});
}
});

Ext.onReady(function() {
var
p = Ext.create("CustomPanel", {
border: 50,
renderTo: Ext.getBody(),
listeners: {
render: function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.render(%o)", arguments);
}
}
});
});

works fine.

Method# 2


Ext.define("CustomPanel", {
extend: "Ext.panel.Panel",
alias : "widget.custompanel",

config: {
buttons: [
{
text: "Button# 1"
}
],
listeners: {
beforeadd: function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.beforeadd(%o)", arguments);
}
}
},

constructor: function(config) {

this.initConfig(config);
this.callParent([this.config]);

return this;
},

initComponent: function() {
Ext.apply(this, {
tbar: {
items: [
{
xtype: "button",
text: "TBar Button #1 (Add)",
handler: function(btn, e) {
this.add({ xtype: "button", text: "AddedButton" });
},
scope: this
}
]
}
});

this.addListener("afterrender", function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.afterrender(%o)", arguments);
});

this.callParent(arguments);

this.addListener("beforerender", function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.beforerender(%o)", arguments);
});
}
});

Ext.onReady(function() {
var
p = Ext.create("CustomPanel", {
border: 50,
renderTo: Ext.getBody(),
listeners: {
render: function(panel, eOpts) {
if(window.console && console.log)
console.log("CustomPanel.render(%o)", arguments);
}
}
});
});

render() -> initContainer() -> El.get(el) (ext-all-debug.js line# 7929) returns null for renderTo. Why? What is the difference between method# 1 and method# 2?

P.S. This is a test code. I've read this (http://www.sencha.com/forum/showthread.php?124740-constructor-or-initComponent) and I understand that the best way is to use initComponent.

[sskow200]

The support for initConfig is very vague, but from my understanding initConfig checks the passed object and references each config name to a function in your class. For example:



this.initConfig({
title: 'My Title',
buttons: [{text: 'Button 1'}] //will not work
});

//should call
this.setTitle(config.title);
this.setButtons(config.buttons); //this function does not exist


The applyConfig function in Ext.Base attempts translate those configs, but if the functions do not exist then it will just skip them. Also, 'buttons' is not a valid configuration for Ext.panel.Panel so those will not be used there.

It is best to not use a constructor when creating a component unless you are adding mixins to your component. If you're going to override your constructor the correct way to do that should be:



constructor: function(config) {
this.callParent(arguments);

//some more constructor code
}

[Ex_Soft]

'buttons' is not a valid configuration for Ext.panel.Panel so those will not be used thereWhy? (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.panel.Panel-cfg-buttons)

[sskow200]

My apologies. I forgot in Ext4.x they have added the buttons config in all panels, not just Ext.Window.