поиска и извлечения данных из XML с помощью ExtJS

Question

Это XML-файл с именем «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

Например, если я вхожу в Mahesh A в поле поиска, он должен извлечь все свои данные из документа "students.xml", используя EXT JS .. Пожалуйста, помогите мне ..

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

Создать grid с соответствующим fields из файла XML

Затем создайте 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