extjs

extJS Overwrite property of extend component


In EXTJS How do I overwrite/create property in extended component?

I usually create function:

checked: function() {
    return this.CKB_Modifier.checked;
}

Solution

  • I would recommend using the config property to add the custom property when defining your class. The advantage is that getter and setter functions are automatically generated by the framework. You can see the name of the auto-generated getter and setter function in the code sample below.

    Check out this, you can run this in a Sencha Fiddle (modern toolkit):

    Ext.define('MyButton', {
        extend: 'Ext.Button',
        xtype: 'mybutton',
        config: {
            // the custom property
            myMessage: null,
            // built-in configuration properties
            text: 'Press me',
            handler: function (button, e) {
                // based the name of the customer property, getter and
                // setter are automatically generated by the framework
                Ext.Msg.alert('Alert', button.getMyMessage());
                button.setMyMessage('Clicked more than once');
            }
        },
    });
    
    Ext.application({
        name: 'Custom property',
        launch: function () {
            Ext.create({
                xtype: 'panel',
                tbar: [{
                    xtype: 'mybutton',
                    myMessage: 'Button was clicked first time'
                }],
                items: [{
                    xtype: 'component',
                    html: 'Panel body'
                }],
                layout: 'fit',
                fullscreen: true,
                renderTo: Ext.getBody()
            });
        }
    });
    

    (I personally like to prefix these custom properties with something in order to always see whether it is an own config property or a built-in one.)