CODEWITHSUNDEEP
extjs
Charles Candy
Charles Candy

Reputation: 27

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;
}

Upvotes: 0

Views: 24

Answers (1)

Peter Koltai
Peter Koltai

Reputation: 9764

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.)

Upvotes: 0

Related Questions