search and retrieve data from xml using extjs

问题

This is XML file named "students.xml"

<?xml version="1.0" encoding="utf-8" ?>
    <Students>
    <Student>
    <Name>Mahesh A</Name>
    <College>NITW</College>
    <Stream>ECE</Stream>
    <Status>Selected</Status>
    </Student>
    <Student>
    <Name>Vikram M</Name>
    <College>IIMA</College>
    <Stream>CS</Stream>
    <Status>Not Selected</Status>
    </Student>
    <Student>
    <Name>Naresh A</Name>
    <College>IITM</College>
    <Stream>EEE</Stream>
    <Status>Not Selected</Status>
    </Student>
    <Student>
    <Name>Prashanth P</Name>
    <College>NITW</College>
    <Stream>EEE</Stream>
    <Status>Selected</Status>
    </Student>
    <Student>
    <Name>Rashi A</Name>
    <College>MIIM</College>
    <Stream>ECE</Stream>
    <Status>Selected</Status>
    </Student>
    <Student>
    <Name>Vikranth M</Name>
    <College>DBIT</College>
    <Stream>IT</Stream>
    <Status>Selected</Status>
    </Student>
    <Student>
    <Name>Pavan D</Name>
    <College>NIIT</College>
    <Stream>IT</Stream>
    <Status>Not Selected</Status>
    </Student>
    <Student>
    <Name>Vishwanath A</Name>
    <College>IIMA</College>
    <Stream>ECE</Stream>
    <Status>Selected</Status>
    </Student>
    <Student>
    <Name>Steyn P</Name>
    <College>NIIT</College>
    <Stream>ECE</Stream>
    <Status>Selected</Status>
    </Student>
    </Students>

I want to create a search page in html which allows users to enter name and retrieve the data corresponding to that name in "students.xml" file using EXT JS

For example If i enter Mahesh A in search box it should retrive all his data from the "students.xml" document using EXT JS.. Please help me..

回答1:

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

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.

To load the xml file to a store:

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

Create a grid with the corresponding fields from the xml file

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

For some really great examples just check out sencha docs

来源：https://stackoverflow.com/questions/21439053/search-and-retrieve-data-from-xml-using-extjs