使用extjs从xml搜索和检索数据 [英] search and retrieve data from xml using extjs

问题描述

这是名为students.xml的XML文件

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>

我想在html中创建一个搜索页面，允许用户输入名称并检索对应的数据该名称在students.xml文件中使用EXT JS

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

例如，如果我在搜索框中输入Mahesh A，它应该从students.xml中取回所有的数据文件使用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..

推荐答案

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

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

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

这篇关于使用extjs从xml搜索和检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！