buscar y recuperar datos de xml usando extjs

Este es un archivo XML llamado “students.xml

   Mahesh A NITW ECE Selected   Vikram M IIMA CS Not Selected   Naresh A IITM EEE Not Selected   Prashanth P NITW EEE Selected   Rashi A MIIM ECE Selected   Vikranth M DBIT IT Selected   Pavan D NIIT IT Not Selected   Vishwanath A IIMA ECE Selected   Steyn P NIIT ECE Selected   

Quiero crear una página de búsqueda en html que permita a los usuarios ingresar el nombre y recuperar los datos correspondientes a ese nombre en el archivo “students.xml” usando EXT JS

Por ejemplo, si ingreso a Mahesh A en el cuadro de búsqueda, debe recuperar todos sus datos del documento “students.xml” utilizando EXT JS. Por favor, ayúdenme …

Hay varias maneras de lograr esto en ExtJS .
Mira este violín que hice para la fuente completa.

Básicamente, deberá cargar el xml en una store y luego podrá filter la store para mostrar los resultados de coincidencia deseados.

En mi ejemplo, estoy filtrando por Name , puede editar esto para filtrar por cualquier cosa en los datos realmente.

Para cargar el archivo xml en una 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' } } }); 

Crea una grid con los fields correspondientes del archivo xml

Luego, cree un panel con los campos de búsqueda y los controladores (aunque técnicamente podría hacer esto en la tbar de la cuadrícula) y agregue la grid a él

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

Para algunos ejemplos realmente buenos solo echa un vistazo a los documentos de sencha