搜索值不会加载包含搜索数据的视图 [Shopware 5]

Posted

技术标签:

【中文标题】搜索值不会加载包含搜索数据的视图 [Shopware 5]【英文标题】:Searching the value does not load the view with searched data [Shopware 5] 【发布时间】:2021-11-22 01:51:41 【问题描述】:

我创建了一个后端窗口并添加了搜索功能。

每当我搜索任何值时,让我们说5004 ExtJS 中更改事件上的console.log(store.data.items) 首先显示所有结果

然后,如果我搜索任何其他值,例如 5007。然后在console.log(store.data.items) 中,它会在控制台选项卡中显示来自5004 的先前结果

网络选项卡显示 php 端带来了正确的结果,但在 ExtJs 上我无法在网格中反映搜索到的数据。

这是我的代码结构

资源/视图/后端/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;
    
);

资源/视图/后端/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);  
    
);

资源/视图/后端/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'
        
    
);

资源/视图/后端/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'
);

有什么线索吗?

【问题讨论】:

【参考方案1】:

这种稍加修改的方法对我上面的情况很有效。

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()的解释可以在这个答案中找到

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

【讨论】:

以上是关于搜索值不会加载包含搜索数据的视图 [Shopware 5]的主要内容,如果未能解决你的问题,请参考以下文章

从视图范围的托管 bean JSF 填充数据表

使用 React Hooks 根据搜索输入值重新加载对象数组

在搜索期间重新加载 UITableView

单击指定单元格后,在搜索栏占位符中获取表格视图单元格文本值

使用导致崩溃的搜索结果更新表视图

搜索后重新加载视图会使应用程序崩溃