搜索值不会加载包含搜索数据的视图 [Shopware 5]
Searching the value does not load the view with searched data [Shopware 5]
我创建了一个后端 window 并添加了搜索功能。
每当我搜索任何值时,让我们说 5004
ExtJS 中更改事件的 console.log(store.data.items)
首先显示所有结果
然后如果我搜索任何其他值,如 5007
。然后在 console.log(store.data.items)
中,它在控制台选项卡
中显示 5004
的先前结果
网络选项卡显示 PHP 端带来了正确的结果,但在 ExtJs 上我无法在网格中反映搜索到的数据。
这是我的代码结构
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'
});
有什么线索吗?
这种稍加修改的方法适用于我上面的案例。
How to refresh or reload panel view in extjs4.1
我所做的只是在 Resources/views/backend/my_test_module/controller/filter.js
在 onSearchTicket()
我添加了这一行
Ext.ComponentQuery.query('my-test-module-listing-grid')[0].store.filter('searchValue', searchString);
所以现在看起来像这样
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);
}
}
关于Ext.ComponentQuery.query()
的解释可以在这个答案中找到
我创建了一个后端 window 并添加了搜索功能。
每当我搜索任何值时,让我们说 5004
ExtJS 中更改事件的 console.log(store.data.items)
首先显示所有结果
然后如果我搜索任何其他值,如 5007
。然后在 console.log(store.data.items)
中,它在控制台选项卡
5004
的先前结果
网络选项卡显示 PHP 端带来了正确的结果,但在 ExtJs 上我无法在网格中反映搜索到的数据。
这是我的代码结构
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'
});
有什么线索吗?
这种稍加修改的方法适用于我上面的案例。
How to refresh or reload panel view in extjs4.1
我所做的只是在 Resources/views/backend/my_test_module/controller/filter.js
在 onSearchTicket()
我添加了这一行
Ext.ComponentQuery.query('my-test-module-listing-grid')[0].store.filter('searchValue', searchString);
所以现在看起来像这样
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);
}
}
关于Ext.ComponentQuery.query()
的解释可以在这个答案中找到