为什么 ext 组件没有被覆盖，尽管我完全按照文档中的描述做了？

Question

我想覆盖 Ext.ux.LiveSearchGridPanel 以便显示其他文本而不是文本“搜索”，例如“xyz”。

我有一个 LiveSearchGridPanel 作为：

Ext.define('MyApp.view.main.List', {
    //extend: 'Ext.grid.Panel',
    extend: 'Ext.ux.LiveSearchGridPanel',
    xtype: 'mainlist',

    requires: [
        'MyApp.store.Personnel'
    ],

    title: 'Personnel',

    store: {
        type: 'personnel'
    },

    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],

    listeners: {
        select: 'onItemSelected',
        afterrender: function() {
            console.log('We have been rendered');
        }
    }
});

我在 ${app.dir}/overrides 目录中创建了新文件 LiveSearchGridPanel123.js：

Ext.define('Ext.overrides.LiveSearchGridPanel123', {
    override: 'Ext.ux.LiveSearchGridPanel',

   initComponent: function () {
        var me = this;
       console.log(this.self.getName() + ' created 123');
        me.tbar = ['XXX', {
                xtype: 'textfield',
                name: 'searchField',
                hideLabel: true,
                width: 20,
                listeners: {
                    change: {
                        fn: me.onTextFieldChange,
                        scope: this,
                        buffer: 100
                    }
                }
            }, {
                xtype: 'button',
                text: '<',
                tooltip: 'Find Previous Row',
                handler: me.onPreviousClick,
                scope: me
            }, {
                xtype: 'button',
                text: '>',
                tooltip: 'Find Next Row',
                handler: me.onNextClick,
                scope: me
            }
        ];

        me.bbar = Ext.create('Ext.ux.StatusBar', {
            defaultText: me.defaultStatusText,
            name: 'searchStatusBar'
        });

        me.callParent(arguments);
    }
});

然后我添加了

    requires: [
        'Ext.overrides.LiveSearchGridPanel123',
   ],

在app.js.

然后我刷新了煎茶应用程序，但组件保持不变。你能告诉我错误在哪里吗？

screenshot

Answer 1

那是因为你叫父this.callParent();.

你可以试试：

Ext.define(null,{
    override:'Ext.ux.LiveSearchGridPanel',
    initComponent: function() {
        const me = this;
        me.tbar = [{
            xtype:'textfield'
        }];
       this.superclass.superclass.initComponent.call(this); //<-- this does the magic
    }
});

为什么 ext 组件没有被覆盖，尽管我完全按照文档中的描述做了？

Why the ext component is not overriden although I did exactly as written in documentation?

extjs

overriding