PDA

View Full Version : How to set component defaults using a custom config object



mx_starter
9 Nov 2015, 8:16 AM
Hello, can you please explain me the rigth way to accomplish the following:

For example, we have a simple panel component like this:



Ext.define('App.MyOwnPanel',


extend: 'Ext.panel.Panel',


panelDefaults: {
panelTitle: 'My Own Panel',
panelHeight: 300
}


initComponent: function() {
//code to apply the title/height
});



Now, one can instantiate it:


Ext.create('App.MyOwnPanel',
panelDefaults: {
panelHeight: 500
});


providing only the panelHeight property within the panelDefaults object.

So - which is the proper way to determine if one of the defaults are missing upon instantiation and to apply the default value for it?

mx_starter
9 Nov 2015, 8:55 AM
Or, in other words, how to get the configuration of the instance within the initComponent() method in order to be able to use Ext.apply()?

joel.watson
9 Nov 2015, 12:56 PM
Hi--

Why not just set the defaults on the class definition? You can set them via the instance config:

https://fiddle.sencha.com/#fiddle/10q4

Thanks
Joel

mx_starter
9 Nov 2015, 2:48 PM
Hi--

Why not just set the defaults on the class definition? You can set them via the instance config:

https://fiddle.sencha.com/#fiddle/10q4

Thanks
Joel

To be honest, Joel, this is what i'm doing for years now...
But, suppose you have a quite complicated component which can have several (10 or more) configuration options, available for customization by the developer at the time of the instantiation. This can easily provide a confusion with their names. Until now, for such options i tend to use an appropriate prefix for their keys (which hints that they can be user-defined). But why not put all of these within an object with an appropriate name?

I mean, it is more clean to me to write this:


var myPanelInstance = Ext.create('App.MyOwnPanel',
{
height: 300, width: 600,
panelDefaults:
{
customOption1: 'customValue1',
customOption2: 'customValue2',
...
customOptionN: 'customValueN',
}
}

);

instead of this:

var myPanelInstance = Ext.create('App.MyOwnPanel',
{
height: 300, width: 600,
customOption1: 'customValue1',
customOption2: 'customValue2',
...
customOptionN: 'customValueN',

}

This way the other user will know that all customizable configs specific to the class are within the panelDefaults config object and are not messed with the "normal" panel configs.

In fact, i can circumvent this by setting my defaults within the initComponent(), merging them with the instance config like this:


Ext.define('App.MyOwnPanel',
extend: 'Ext.panel.Panel',


initComponent: function() {
var me = this;
var panelDefaults = {
panelTitle: 'My Default Panel Title',
panelHeight: 300
};


me.panelDefaults = Ext.isEmpty(me.panelDefaults) ? panelDefaults : Ext.apply(panelDefaults, me.panelDefaults);


});

and instantiating it like this (the panelHeight uses the default value of 300):



Ext.create('App.MyOwnPanel',
{
panelDefaults: {panelTitle: 'InstanceTitle'}
}

);


sound logical, am i right?

After all, when we use "normal ExtJS classes", we have a constructor() method which receives the instance config object as a parameter, so we can (using initConfig()) merge a property from this config object with the same property defined in the class definition (even if the property itself is an object).
So i think a similar approach could be used with the components, but not sure how...