Question

这是名为“students.xml”的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中创建一个搜索页面，允许用户输入名称并使用EXT JS在“students.xml”文件中检索与该名称对应的数据

例如，如果我在搜索框中输入Mahesh A，它应该使用EXT JS从“students.xml”文档中检索所有数据。请帮帮我..

Answer 1

ExtJS有多种方法可以实现这一目标 Check out this fiddle I made for the full source.

基本上，您需要将xml加载到store，然后filter store以显示所需的匹配结果。

在我的示例中，我按Name进行过滤，您可以对其进行编辑，以便真正过滤数据中的任何内容。

将xml文件加载到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'
                }
            }
        });

使用xml文件中的相应grid创建fields

然后，使用搜索字段和处理程序创建panel（尽管从技术上讲，您可以在网格的tbar中执行此操作）并将grid添加到其中

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

使用extjs从xml搜索和检索数据

1 个答案: