Question

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

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

正如我对Ext.define所理解的那样，我创建了一个类似于一个类并使用Ext.create（或通过使用widget快捷方式）我创建了这个类的对象，如果我理解错误就纠正我。

例如：

我想基于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);
    }
});

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

Answer 1

此代码将更新页面标题

        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

查看更新的小提琴： https://fiddle.sencha.com/#fiddle/11ld

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

祝你好运！

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

1 个答案: