首先看前端代码：

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()     }); });

下面是服务端的代码：