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

Question

I would like to override Ext.ux.LiveSearchGridPanel so that instead of text ‘Search’ some other text appears, for example ‘xyz’.

I have a LiveSearchGridPanel as:

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

I created new file LiveSearchGridPanel123.js in ${app.dir}/overrides directory:

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

And I added

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

In app.js.

Then I did sencha app refresh, but component remained the same. Could you please tell me where the the error is?

screenshot

After making a change like override or extending one of my own classes I like to remove the build directory and also bootstrap.* in the app director and then build again, as opposed to doing a app refresh. — mcg1103, Dec 17 '20 at 00:28
Did you look at this? https://stackoverflow.com/a/14254627/1068246 — Muzaffer Galata, Dec 17 '20 at 09:48

score 1 · Accepted Answer · edited Dec 16 '20 at 19:36

1

It's because you call parent this.callParent();.

You can try:

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

edited Dec 16 '20 at 19:36

rgettman

176,041
30
275
357

answered Dec 16 '20 at 18:29

wispoz

26
1

Thank you Pavel. How can I further override it to include x button in this 'textfield' to clear its vaule? I've tried to use xtype: 'searchfield', but I got an error. – zuriosam Dec 18 '20 at 19:48
https://fiddle.sencha.com/#view/editor&fiddle/3ard i think, this will work. But i suggest you make your own livesearchgrid with ViewController without override Ext version. – wispoz Dec 19 '20 at 20:56

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

1 Answers1