extjs6 写一个模糊查询的完整例子

以下是一个使用ExtJS 6实现模糊查询的完整例子：

1. 创建一个包含表格和搜索框的页面：

Ext.create('Ext.panel.Panel', {
    title: 'Search Example',
    width: 500,
    height: 400,
    layout: 'border',
    items: [{
        region: 'center',
        xtype: 'grid',
        id: 'dataGrid',
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            flex: 1
        }],
        store: Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'John',
                email: 'john@example.com',
                phone: '555-1234'
            }, {
                name: 'Jane',
                email: 'jane@example.com',
                phone: '555-5678'
            }, {
                name: 'Bob',
                email: 'bob@example.com',
                phone: '555-9012'
            }]
        })
    }, {
        region: 'north',
        xtype: 'textfield',
        id: 'searchField',
        fieldLabel: 'Search',
        labelWidth: 50,
        margin: 5,
        listeners: {
            change: function(field, newValue) {
                var grid = Ext.getCmp('dataGrid');
                var store = grid.getStore();
                store.clearFilter();
                if (newValue) {
                    var matcher = new RegExp(Ext.String.escapeRegex(newValue), 'i');
                    store.filter({
                        filterFn: function(record) {
                            return matcher.test(record.get('name')) || matcher.test(record.get('email')) || matcher.test(record.get('phone'));
                        }
                    });
                }
            }
        }
    }],
    renderTo: Ext.getBody()
});

2. 在搜索框的change事件监听器中添加代码，以便根据输入的文本过滤表格中的数据。使用正则表达式进行模糊匹配。如果搜索框为空，则清除所有过滤器。

3. 运行代码并输入搜索条件，可以看到表格中只显示与搜索条件匹配的记录。

完整的代码如下：

Ext.create('Ext.panel.Panel', {
    title: 'Search Example',
    width: 500,
    height: 400,
    layout: 'border',
    items: [{
        region: 'center',
        xtype: 'grid',
        id: 'dataGrid',
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            flex: 1
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            flex: 1
        }],
        store: Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'John',
                email: 'john@example.com',
                phone: '555-1234'
            }, {
                name: 'Jane',
                email: 'jane@example.com',
                phone: '555-5678'
            }, {
                name: 'Bob',
                email: 'bob@example.com',
                phone: '555-9012'
            }]
        })
    }, {
        region: 'north',
        xtype: 'textfield',
        id: 'searchField',
        fieldLabel: 'Search',
        labelWidth: 50,
        margin: 5,
        listeners: {
            change: function(field, newValue) {
                var grid = Ext.getCmp('dataGrid');
                var store = grid.getStore();
                store.clearFilter();
                if (newValue) {
                    var matcher = new RegExp(Ext.String.escapeRegex(newValue), 'i');
                    store.filter({
                        filterFn: function(record) {
                            return matcher.test(record.get('name')) || matcher.test(record.get('email')) || matcher.test(record.get('phone'));
                        }
                    });
                }
            }
        }
    }],
    renderTo: Ext.getBody()
});