Add custom configuration properties for component classes in Sencha Touch

Sencha Touch component classes comes with default configurations. Let's say for Ext.Button component classes, following are some of the default configurations

• cls
• style
• text
• id
• itemId
• and so on

In addition to that, Sencha touch also supports adding your own configuration properties. Let's see an example by adding custom configurations for button class components.

Ext.define('MyProject.components.MyButton', {
    extend: 'Ext.Button',
    xtype: 'mybutton',

    config: {
        showButton: false,
        className: 'cssclass'
    },
    _store: null,
    _record: null,

    initialize: function () {

        if (this.getShowButton()) {
            this.setHidden(false);
        } else {
            this.setHidden(true);
        }

        this.setClassName();
    },

    setClassName: function () {
        if (this.getClassName() !== null && this.getClassName() !== undefined) {

            this.setCls(this.getClassName());

        }
    }
});

From above code, i have added two configuration properties showButton, className and two properties _store and _record.  Now we are going to use the above created button component class in our container component.

Ext.define('MyProject.view.MyContainer', {
    extend: 'Ext.Container',
    xtype: 'mycontainer',
    requires: 'MyProject.components.MyButton',
    config: {
        items: [{
            xtype: 'mybutton',
            showButton: true,
            className: 'redcolor'

        }]
    }
});

Inside config property, i set showButton configuration to true when will display the button in the viewport. By setting showButton configuration to false, we can hide the button from rendering. Also cls configuration value will be set from the className property.

Hope, you enjoyed this post.