有很多方法可以实现这一点

退房这个小提琴是为了完整的来源而设计的。

There are a number of ways to accomplish this in ExtJS.
Check out this fiddle I made for the full source.

本质上，你需要加载 xml 进入商店，然后您可以过滤器 商店以显示所需的匹配结果。

Essentially, you'll need to load the xml into a store and then you can filter the store to show the desired matching results.

在我的示例中，我通过名称进行过滤，您可以编辑此内容以过滤数据中的任何内容

In my example I'm filtering by the Name, you can edit this to filter by anything in the data really.

将xml文件加载到商店：

Ext.define('Student', {
            extend: 'Ext.data.Model',
            proxy: {
                type: 'ajax',
                reader: 'xml'
            },
            fields: ['Name', 'College', 'Stream', 'Status']
        });

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            model: 'Student',
            autoLoad: true,
            proxy: {
                // load using HTTP
                type: 'ajax',
                url: 'data.xml',
                // the return will be XML, so lets set up a reader
                reader: {
                    type: 'xml',
                    root: 'Students',
                    record: 'Student'
                }
            }
        });

创建一个网格与相应的字段从xml文件

Create a grid with the corresponding fields from the xml file

然后，创建一个面板搜索字段和处理程序（尽管您可以在技术上在网格的 tbar 中执行此操作），并将网格添加到它

Then, create a panel with the search fields and handlers (although you could technically do this in the tbar of the grid) and add the grid to it

var resultsGrid = Ext.create('Ext.grid.Panel',{
            store:store,
            columns:[
                {text:'Name',dataIndex:'Name'},
                {text:'College',dataIndex:'College'},
                {text:'Stream',dataIndex:'Stream'},
                {text:'Status',dataIndex:'Status'}
            ]
        })

        Ext.create('Ext.form.Panel',{
            renderTo:Ext.getBody(),
            title:'Search',
            tbar:[{
                xtype:'textfield',
                fieldLabel:'Name',
                emptyText:'Search Here',
                itemId:'searchFld'
            },{
                xtype:'button',
                text:'Search',
                handler:function(btn){
                    var searchValue = btn.up('form').down('#searchFld').getValue();
                    if(searchValue==''){
                        store.clearFilter();
                    }
                    else{
                        store.filterBy(function(record,id){
                            return record.get('Name')==searchValue;
                        })
                    }
                }
            }],
            items:[resultsGrid]
        });

对于一些非常好的例子，只需查看 sencha docs

For some really great examples just check out sencha docs