PDA

View Full Version : The best way to create custom component



Ex_Soft
9 Feb 2012, 7:39 AM
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
9 Feb 2012, 8:35 AM
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
9 Feb 2012, 11:59 PM
'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
10 Feb 2012, 6:39 AM
My apologies. I forgot in Ext4.x they have added the buttons config in all panels, not just Ext.Window.