Javascript 在自定义方法中获取对组件实例的引用

我想扩展一个ext组件并向其添加几个自定义方法

我的问题是：当定义组件时，我如何在其自定义方法中获取对其实例的引用？（请查看下面的代码以获得澄清）

正如我对Ext.define的理解，我创建的有点像类，而使用Ext.create（或通过使用小部件快捷方式）我创建这个类的对象，如果我理解错误，请纠正我

例如：

我想基于

Ext.toolbat.Toolbar

创建页眉组件：

Ext.define('Ext.lib.extensions.MyPageHeader', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.myPageHeader',

    items: [
        xtype: 'component',
        autoEl: {
            cls: 'portal_page_header_title',
            tag: 'span'
        },
        id: 'pageTitleComponent'
    ],

    initComponent: function () {
        if (Object.prototype.hasOwnProperty.call(this.initialConfig, 'pageTitle')) {
            this.setPageTitle(this.initialConfig.pageTitle);
        }

        this.callParent(arguments);
    },

    setPageTitle: function (title) {
        // How I can get reference to a MyPageHeader instance here?
        // Is seems that `this` doesnt work, atleast I cant use `down()` method of Ext.toolbar.Toolbar
        this.down('#pageTitleComponent').update(title);
    }
});

我的工作方案是：

Ext.define('Ext.lib.extensions.MyPageHeader', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.myPageHeader',

    initComponent: function () {
        this.pageTitleComponent = Ext.create('Ext.Component', {
            autoEl: {
                cls: 'portal_page_header_title',
                tag: 'span'
            }
        });

        var pageHeaderItems = [
            this.pageTitleComponent
        ];

        Ext.apply(this, {
            items: pageHeaderItems
        });

        if (Object.prototype.hasOwnProperty.call(this.initialConfig, 'pageTitle')) {
            this.setPageTitle(this.initialConfig.pageTitle);
        }

        this.callParent(arguments);
    },

    setPageTitle: function (title) {
        this.pageTitleComponent.update(title);
    }
});

---

但我不认为这是做这种事的最好方式。有更好的方法吗？

此代码将更新页面标题

        Ext.define('Ext.lib.extensions.MyPageHeader', {
        extend: 'Ext.toolbar.Toolbar',
        alias: 'widget.myPageHeader',



        initComponent: function () {

            var me = this;

            Ext.applyIf(me, {

                items: [
                    {
                        xtype: 'component',
                        autoEl: {
                            cls: 'portal_page_header_title',
                            tag: 'span'
                        },
                        itemId: 'pageTitleComponent'
                    }
                ],
            });

            me.callParent(arguments);

            me.setPageTitle(me.pageTitle);
        },

        setPageTitle: function (title) {

            // How I can get reference to a MyPageHeader instance here?
            // Is seems that `this` doesnt work, atleast I cant use `down()` method of Ext.toolbar.Toolbar
            this.down('#pageTitleComponent').update(title);
        }
    });


    var cmp = Ext.create('Ext.lib.extensions.MyPageHeader', {
        pageTitle: 'Cool Cat Dog'
    });

    console.log(cmp.down('#pageTitleComponent').html); // Cool Cat Dog

请参阅更新的小提琴：

问题是在调用this.callParent之前调用了this.setPageTitle。调用this.callParent会添加所有扩展功能，包括查询组件

祝你好运