Sencha跨文件传值：如何用输入框实现Grid表格过滤

核心实现思路 #

要实现从Filters面板输入值后设置Grid的过滤器，需完成以下步骤：

1. 获取输入框的过滤值
2. 定位到目标Grid组件
3. 获取Grid的gridfilters插件实例
4. 为指定列的过滤器设置值并激活过滤
5. 触发过滤动作；移除过滤时则清除过滤器状态并清空输入框

修改后的FilterController代码 #

Ext.define('Prj01Filtros.view.main.FilterController',{
    extend: 'Ext.app.ViewController',
    alias: 'controller.controllerFilter',

    onClickFilter: function() {
        // 获取输入框的过滤文本
        const filterValue = this.getView().down('textfield[name=textFieldSearch]').getValue();
        if (!filterValue) return;

        // 通过xtype查询获取Grid组件
        const grid = Ext.ComponentQuery.query('mainlist')[0];
        if (!grid) return;

        // 获取GridFilters插件实例
        const gridFilters = grid.getPlugin('gridfilters');
        if (!gridFilters) return;

        // 为所有字符串类型的列过滤器设置值（可改为指定单个列）
        gridFilters.getFilters().each(filter => {
            if (filter.getType() === 'string') {
                filter.setValue(filterValue);
                filter.setActive(true);
            }
        });

        // 可选：仅为指定列设置过滤（例如只过滤Name列）
        // const nameFilter = gridFilters.getFilter('name');
        // if (nameFilter) {
        //     nameFilter.setValue(filterValue);
        //     nameFilter.setActive(true);
        // }

        // 触发过滤操作
        gridFilters.applyFilters();
    },

    onClickRemove: function() {
        // 获取Grid组件
        const grid = Ext.ComponentQuery.query('mainlist')[0];
        if (!grid) return;

        // 获取GridFilters插件
        const gridFilters = grid.getPlugin('gridfilters');
        if (!gridFilters) return;

        // 清除所有过滤器状态
        gridFilters.clearFilters();

        // 可选：仅清除指定列的过滤器
        // const nameFilter = gridFilters.getFilter('name');
        // if (nameFilter) {
        //     nameFilter.setActive(false);
        //     nameFilter.setValue(null);
        // }
        // gridFilters.applyFilters();

        // 清空输入框内容
        this.getView().down('textfield[name=textFieldSearch]').setValue('');
    }
})

修正Filters.js的组件结构问题 #

你当前的代码把textfield放在了buttons数组中，这不符合Sencha的组件规范（buttons仅用于放置按钮组件），建议调整为以下结构：

Ext.define('Prj01Filtro.view.main.Filters', {
    extend:'Ext.form.Panel',
    xtype: 'Filters',
    alias: 'form.formFilter',
    
    requires: [
        'Prj01Filtros.view.main.FilterController'
    ],

    controller: 'controllerFilter',
    
    items:[
        {
            margin: '0 0 10 0',
            layout: 'hbox',
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: 'Filter',
                    name: 'textFieldSearch',
                    flex: 1,
                    margin: '0 5 0 0'
                }, {
                    xtype: 'button',
                    name: 'buttonSearch',
                    text: 'Buscar',
                    listeners: {
                        click: 'onClickFilter'
                    }
                }, {
                    xtype: 'button',
                    name: 'buttonRemoveFilter',
                    text: 'X',
                    margin: '0 0 0 5',
                    listeners: {
                        click: 'onClickRemove'
                    }
                }
            ]
        }
    ]
});

关键API说明 #

• Ext.ComponentQuery.query('xtype')：通过组件的xtype查询获取目标组件实例
• grid.getPlugin('gridfilters')：获取Grid的过滤器插件
• filter.setValue(value)：设置过滤器的匹配值
• filter.setActive(true)：激活过滤器
• gridFilters.applyFilters()：触发Grid执行过滤
• gridFilters.clearFilters()：清除所有过滤器状态

内容的提问来源于stack exchange，提问作者DungeonMtr