PDA

View Full Version : Guidelines for extending components?



ChrisOhB
27 Feb 2013, 1:48 PM
Let's say I'm extending the ComboBox control to define some defaults that I want all the combos to use in our product. There's a number of different ways this could be accomplished, shown below.

What are the different implications of the variations?

For example, what if I wanted to create another combo that extends DefaultCombo? Do any of these variations make that more or less difficult? How do I know whether to just put a property value at the root config level (example A) vs. using Ext.apply(this, {...}) in initComponent as shown in example B?


// A)
Ext.define('DefaultCombo', {
extend: 'Ext.form.field.ComboBox',
matchFieldWidth: false,
selectOnFocus: true,
forceSelection: true,
htmlEncode: true
});


// B)
Ext.define('DefaultCombo', {
extend: 'Ext.form.field.ComboBox',
initComponent: function() {
Ext.apply(this, {
matchFieldWidth: false,
selectOnFocus: true,
forceSelection: true,
htmlEncode: true
});
this.callParent();
}
});


// C)
Ext.define('DefaultCombo', {
extend: 'Ext.form.field.ComboBox',
constructor: function(config) {
this.callParent([Ext.apply(config || {}, {
matchFieldWidth: false,
selectOnFocus: true,
forceSelection: true,
htmlEncode: true
})]);
}
});

mitchellsimoens
1 Mar 2013, 8:06 AM
If you extend it again, B and C are going to make it harder to change the defaults, A is the better one. The only time you need to change a property in a method is if it's an array/object value or you need some logic to determine the value. Otherwise just set it like A.