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

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

Ext.onReady(function() {

    // 创建一个store，用于存储数据
    var store = Ext.create('Ext.data.Store', {
        fields: ['id', 'name', 'age'],
        data: [
            {id: 1, name: '小明', age: 20},
            {id: 2, name: '小红', age: 22},
            {id: 3, name: '张三', age: 25},
            {id: 4, name: '李四', age: 30},
            {id: 5, name: '王五', age: 28}
        ]
    });

    // 创建一个textfield，用于输入查询关键字
    var searchField = Ext.create('Ext.form.field.Text', {
        fieldLabel: '查询',
        labelWidth: 50,
        width: 200,
        margin: '10 0 0 10',
        listeners: {
            change: function(field, newValue, oldValue) {
                // 当查询关键字发生变化时，重新加载store
                store.load({
                    params: {
                        query: newValue
                    }
                });
            }
        }
    });

    // 创建一个grid，用于显示数据
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {text: 'ID', dataIndex: 'id'},
            {text: '姓名', dataIndex: 'name'},
            {text: '年龄', dataIndex: 'age'}
        ],
        width: 400,
        height: 200,
        renderTo: Ext.getBody()
    });

    // 将textfield添加到grid的tbar中
    grid.addDocked({
        xtype: 'toolbar',
        dock: 'top',
        items: [searchField]
    });

    // 创建一个过滤器，用于实现模糊查询
    var filter = function(item) {
        var query = searchField.getValue();
        if (query) {
            var name = item.get('name');
            return name.indexOf(query) !== -1;
        }
        return true;
    };

    // 将过滤器添加到store中的filter属性中
    store.filterBy(filter);
});

该例子中，首先创建了一个存储数据的store，然后创建一个textfield用于输入查询关键字，当查询关键字发生变化时，重新加载store。然后创建一个grid用于显示数据，并将textfield添加到grid的tbar中。最后创建一个过滤器，用于实现模糊查询，并将过滤器添加到store中的filter属性中。这样，当用户输入查询关键字时，store会自动根据过滤器过滤数据，grid会自动更新显示的数据。