Extjs4实现客户端搜索（过滤数据）

首先看前端代码：

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'username', type: 'string'},
        {name: 'sex',  type: 'string'},
        {name: 'age',       type: 'int'},
        {name: 'position',  type: 'string'}
    ]
});

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
       url : 'data/get_users.php',
    
        api:{
            read:'data/get_users.php',
            query:'data/users.json'
        },
     
        reader: {
            type: 'json',
            root: 'root'
        }
    },
    autoLoad: true
});

Ext.define('MyApp.view.ui.MyPanel', {
    extend: 'Ext.panel.Panel',
    height: 364,
    width: 468,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: '用户列表',
    
    initComponent: function() {
        var me = this;
        me.items = [
            {
                xtype: 'form',
                bodyPadding: 10,
                title: '',
                flex: 1,
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: '关键词',
                        labelAlign: 'right',
                        labelWidth: 60,
                        name:'key',
                        id:'key',
                        anchor: '100%'
                    },
                    {
                        xtype: 'button',
                        margin: '10 0 0 65',
                        text: '查询',
                        handler:function(btn){
                            
                            
                            var form=btn.up('form').getForm();
                            var key=form.getValues().key;//获取输入框的值
                            var pattern=new RegExp(key);
                            Ext.getCmp('mygrid').getStore().filterBy(function(record,id){                            
                                var username=record.get('username');
                                return pattern.test(username);//检索每一列的username是否包含输入框的值
                            });
                 
                            
                        }
                    }
                ]
            },
            {
                xtype: 'gridpanel',
                title: '',
                id:'mygrid',
                flex: 3,
                store:myStore,
                columns: [
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'username',
                        text: '用户名'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'sex',
                        text: '性别'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'age',
                        text: '年龄'
                    },
                    {
                        xtype: 'gridcolumn',
                        dataIndex: 'position',
                        text: '职位'
                    }
                ],
                viewConfig: {

                },
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                text: '新增'
                            },
                            {
                                xtype: 'button',
                                text: '编辑选中'
                            },
                            {
                                xtype: 'button',
                                text: '删除选中'
                            },
                            {
                                xtype: 'button',
                                text: '刷新',
                                handler:function(){
                                    Ext.getCmp('mygrid').getStore().load();
                                }
                            }
                        ]
                    }
                ],
                selModel: Ext.create('Ext.selection.CheckboxModel', {

                })
            }
        ];
        me.callParent(arguments);
    }
});


Ext.onReady(function(){
    Ext.create('MyApp.view.ui.MyPanel',{
        renderTo:Ext.getBody()
    });
});

下面是服务端的代码：

<?php

require("inc.php");

$result=mysql_query("SELECT * FROM users ");


while($row=mysql_fetch_assoc($result))
{
    $data['root'][]=$row;
}

echo json_encode($data);

?>