Implement single inheritance for config object in Sencha Touch 2

Today, we are going to see how to apply single inheritance for component config object using Ext.apply() method in Sencha Touch 2. This Ext.apply() method accept three parameters and returns the final object.

Object:  The receiver of the config properties
Config: The source of the config properties
defaults: The different object that will also be applied for default values.

Implementation:

Let's define the default button with configuration properties, this default button configuration object will be the source object ( i.e parent object).

var defaultButton = {
 xtype: 'button',
 cls: 'buttonCls'
};

Now, let's implement the receiver object (i.e child object) which will extend the parent configuration object. the different configuration properties that varies from the source object needs to be specified as the third parameter.

var saveButton = Ext.apply({},defaultButton,{name: 'save', itemId: 'save', text: 'Save'});    

var backButton = Ext.apply({},defaultButton,{name: 'back', itemId: 'back', text: 'Back'});

var resetButton = Ext.apply({},defaultButton,{name: 'reset', itemId: 'reset', text: 'Reset'});

Let's apply these three buttons as child items for the Ext.TitleBar Class. Here is the implementation.

Ext.Viewport.add({

        xtype: 'titlebar',
        title: 'Inheritance Demo',
        docked: 'top',
        height: '15%',

        items: [saveButton, backButton, resetButton]
});

Here is the final output

Hope, you enjoyed this Post.