如何在 ExtJS 自定義 class 中正確定義屬性

Question

我正在嘗試為我們的網格創建一個可重復使用的標題欄。 這將需要幾個可以在使用網格標題欄時設置的屬性。 我遇到的問題是當我嘗試使用它時該屬性未定義。

我查看了 ExtJS 是如何做到這一點的，並看到他們在配置塊中設置了屬性。 所以我嘗試了沒有運氣。 我還嘗試刪除配置塊並添加具有相同結果的屬性。

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,
    }],
});

我希望工具提示默認顯示“測試”，或者如果默認值被覆蓋，我希望它顯示被覆蓋的字符串。

根據以下答案編輯第二次嘗試。

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();
    },
});

Answer 1

您正確定義了該屬性。 您的問題是您訪問它的方式。

在構建items構造時， this上下文是加載文件的任何內容 - 可能是引導加載程序。 奇怪的是，這不會有你的新財產。

為了訪問新類/對象的屬性，您需要在創建 object 之后定義items構造。 一個很好的位置是在initComponent方法中。

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

Answer 2

如果您使用的是現代工具包，請使用初始化方法而不是 initComponent