How to properly define properties in ExtJS custom class

Question

I am attempting to create a reusable title bar for our grids. This will require a couple of properties which can be set when the grid title bar is used. The problem I am running into is that the property is undefined when I attempt to use it.

I looked at how ExtJS appears to do this and saw that they set up their properties in the config block. So I tried that with no luck. I have also tried removing the config block and adding the property with the same result.

Ext.define('ERM.view.mastersite.GridTitleBar', {
    extend: 'Ext.TitleBar',
    xtype: 'gridtitlebar',
    margin: '0 0 20 0',
    shadow: true,
    cls: 'x-big',

    style: {
        border: 'solid lightgrey 2px'
    },

    config: {
        addNewToolTip: 'test',
    },

    items: [{
        xtype: 'button',
        iconCls: 'md-icon-add-circle',
        text: 'Add',
        align: 'right',
        tooltip: this.parent.addNewToolTip,
    }],
});

I'm expecting the tool tip to show "test" by default, or if the default is overridden, I'm expecting it to show the overridden string.

Edit Second attempt based on the answers below.

Ext.define('ERM.view.mastersite.GridTitleBar', {
    extend: 'Ext.TitleBar',
    xtype: 'gridtitlebar',
    margin: '0 0 20 0',
    shadow: true,
    cls: 'x-big',

    style: {
        border: 'solid lightgrey 2px'
    },

    config: {
        addNewToolTip: 'test',
    },

    initialize: function () {
        const me = this;
        me.items = [{
            xtype: 'button',
            text: 'Add',
            iconCls: 'md-icon-add-circle',
            tooltip: me.getAddNewToolTip(),
        }];

        this.callParent();
    },
});

score 1 · Answer 1 · answered Oct 16 '19 at 23:34

1

if you are using modern toolkit use initialize method instead of initComponent

answered Oct 16 '19 at 23:34

Wemerson Januario

127
6

score 0 · Answer 2 · answered Oct 16 '19 at 22:40

You're correctly defining the property. Your problem is the way you are accessing it.

At the time of building the items construct, the this context is whatever has loaded the file - probably the boot loader. Strangely enough, that won't have your new property.

In order to access properties of your new class/object, you need to define the items construct after the object is created. One good location for that is in the initComponent method.

Ext.define('ERM.view.mastersite.GridTitleBar', {
  // in here, the 'this' context is whatever loaded the file. 
...
  config: {
    addNewToolTip: 'test',
  },
...
  initComponent: function() {
    // In here, like most methods in ExtJS, the 'this' context is the owning instance.
    this.items = [{
        xtype: 'button',
...
        // Oh, and it's a good idea to use the accessors for config variables
        tooltip: this.getAddNewToolTip()
    }]
    // don't forget to call the parent.
    this.callParent(arguments);
});

Learning how the `this` keyword works in JavaScript, and how the relevant context is determined, will save you a lot of grief in the long run. It's _not_ like Java in any way, and will trip you up if you're not careful. — Robert Watkins, Oct 16 '19 at 22:42
I've tried doing what you have above and my button disappeared. I've moved the items into the initComponent and made sure to call the parent. — gbishop, Oct 17 '19 at 15:43

How to properly define properties in ExtJS custom class

2 Answers2