为啥 ext 组件没有被覆盖，尽管我完全按照文档中的说明做了？

Posted 2023-02-26

【中文标题】为啥 ext 组件没有被覆盖，尽管我完全按照文档中的说明做了？

【英文标题】：Why the ext component is not overriden although I did exactly as written in documentation?为什么 ext 组件没有被覆盖，尽管我完全按照文档中的说明做了？

【发布时间】：2020-12-15 22:54:53

【问题描述】：

我想覆盖 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 中。

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

screenshot

【问题讨论】：

在进行更改（如覆盖或扩展我自己的一个类）后，我喜欢删除应用程序目录中的构建目录和 bootstrap.*，然后再次构建，而不是进行应用程序刷新。

你看过这个吗？ ***.com/a/14254627/1068246

【参考方案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
    
);

【讨论】：

谢谢帕维尔。如何进一步覆盖它以在此“文本字段”中包含 x 按钮以清除其值？我尝试使用 xtype: 'searchfield'，但出现错误。

fiddle.sencha.com/#view/editor&fiddle/3ard 我想，这行得通。但我建议您使用 ViewController 制作自己的 livesearchgrid 而不覆盖 Ext 版本。