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?
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