Searching the value does not load the view with searched data [Shopware 5]

Question

I have created a backend window and added the search functionality.

Whenever i search any value lets say 5004 The console.log(store.data.items) on the change event in ExtJS first shows all the results

And then after that if i search any other value like 5007. Then in console.log(store.data.items) it shows the previous results from 5004 in console tab

The network tab shows that PHP side is bringing the correct result but on ExtJs i am unable to reflect the searched data in the grid.

This is my code structure

Resources/views/backend/my_test_module/app.js

Ext.define('Shopware.apps.MyTestModule', {
    extend: 'Enlight.app.SubApplication',

    name:'Shopware.apps.MyTestModule',

    loadPath: '{url action=load}',
    bulkLoad: true,

    controllers: [
        'Main',
        'Filter'
    ],

    views: [
        'list.Window',
        'list.List'
    ],

    models: [ 'MyTestModule' ],
    stores: [ 'MyTestModule' ],

    launch: function() {
        return this.getController('Main').mainWindow;
    }
});

Resources/views/backend/my_test_module/controller/filter.js

Ext.define('Shopware.apps.MyTestModule.controller.Filter', {

    extend:'Ext.app.Controller',

    init:function () {
        var me = this;

        me.control({
            'my-test-module-listing-grid textfield[action=searchTicket]': {
                searchTicket: me.onSearchTicket
            }
        });
        me.callParent(arguments);
    },

    onSearchTicket: function (value) {
        var me = this,
            store = me.getStore('MyTestModule');

        var searchString = Ext.String.trim(value);

        // scroll the store to first page
        store.currentPage = 1;

        // If the search-value is empty, reset the filter
        if (searchString.length === 0) {
            store.clearFilter();
        } else {
            // This won't reload the store
            store.filters.clear();
            // Loads the store with a special filter
            store.filter('searchValue', searchString);

        }

        console.log(store.data.items);  
    }
});

Resources/views/backend/my_test_module/model/my_test_module.js

Ext.define('Shopware.apps.MyTestModule.model.MyTestModule', {
    extend: 'Ext.data.Model',

    fields: [
        { name : 'id', type: 'int' },
        { name : 'some_field_one', type: 'string' },
        { name : 'order_number', type: 'string' },
        { name : 'ticket_number', type: 'string' },
        { name : 'some_field_two', type: 'string' },
        { name : 'some_field_three', type: 'string' }
    ],

    /**
     * Configure the data communication
     * @object
     */
    proxy: {
        type: 'ajax',

        /**
         * Configure the url mapping for the different
         * store operations based on
         * @object
         */
        api: {
            read: '{url controller="MyTestModule" action="list"}',
            update: '{url controller="MyTestModule" action="update"}',
        },

        /**
         * Configure the data reader
         * @object
         */
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'total'
        }
    }
});

Resources/views/backend/my_test_module/store/my_test_module.js

Ext.define('Shopware.apps.MyTestModule.store.MyTestModule', {
    extend: 'Ext.data.Store',

    pageSize: 10,
    remoteFilter: true,
    remoteSort: true,

    autoLoad: true,

    /**
     * Define the used model for this store
     * @string
     */
    model: 'Shopware.apps.MyTestModule.model.MyTestModule'
});

Any clues?

Answer 1

This approach with a little modification worked for me for my case above.

How to refresh or reload panel view in extjs4.1

All i did was that in my Resources/views/backend/my_test_module/controller/filter.js in the onSearchTicket()

i added this line

Ext.ComponentQuery.query('my-test-module-listing-grid')[0].store.filter('searchValue', searchString);

So now it look like this

onSearchTicket: function (value) {
        var me = this,
            store = me.getStore('MyTestModule');

        var searchString = Ext.String.trim(value);

        // scroll the store to first page
        store.currentPage = 1;

        // If the search-value is empty, reset the filter
        if (searchString.length === 0) {
            Ext.ComponentQuery.query('my-test-module-listing-grid')[0].store.clearFilter();
        } else {
            // otherwise filter the store with filtered value
            Ext.ComponentQuery.query('my-test-module-listing-grid')[0].store.filter('searchValue', searchString);
        }
    }

And the explanation for Ext.ComponentQuery.query() can be found in this answer

https://stackoverflow.com/a/35193444/7473771