PHP5

Получение данных XML в ExtJS 4

Аналогично мы могли бы загрузить с помощью ajax-запроса xml-файл. Допустим, у нас на сервере есть файл xmlData.xml:

<languages>
	<language>
		<title>C</title>
		<position>1</position>
		<rate>19</rate>
	</language>
	<language>
		<title>JAVA</title>
		<position>2</position>
		<rate>16</rate>
	</language>
	<language>
		<title>Objective-C</title>
		<position>3</position>
		<rate>10</rate>
	</language>
</languages>

Теперь в качестве ресурса url будет выступать файл xmlData.xml. Получить ответ с сервера в этом случае мы можем также с помощью выражения response.statusText, однако, как и в случае с json, у нас будут недекодированные ланные в виде строки. Поэтому используем свойство responseXML.

Свойство responseXML получает переданные xml-данные, по которым мы потом можем выполнить перебор и найти нужные нам элементы. Для доступа к элементам xml-файла мы можем использовать методы класса Ext.DomQuery. Например, получим текстовое содержимое первого элемента language в нашем файле xml:

//..........................................
		success: function(response, options){
			var doc = response.responseXML;
			var root = Ext.DomQuery.selectNode('languages', doc);
			console.log(Ext.DomQuery.selectNode('language', root).textContent);
		},
//.........................

Для получения данных из xml-узлов мы можем использовать следующие методы класса Ext.DomQuery:

• select(node,root): получает массив узлов, описанных в параметре node и определенных в родительском узле root

• selectNode(node,root): получает первый узел по селектору node в родительском узле root

• selectValue(node,root): получает значение узла node, определенного в родительском узле root

Например, получить значения первого языка программирования из нашего файла xml мы можем таким способом:

Ext.Ajax.request({
		url: 'xmlData.xml',
		success: function(response, options){
			var doc = response.responseXML;
			var root = Ext.DomQuery.selectNode('languages', doc);
			var lang=Ext.DomQuery.selectNode('language', root);
			var pos = Ext.DomQuery.selectValue('position', lang);
			var title = Ext.DomQuery.selectValue('title', lang);
			var rate = Ext.DomQuery.selectValue('rate', lang);
			alert(pos+". " + title+" - "+rate);
		},
		failure: function(response, options){
			alert("Ошибка: " + response.statusText);
		}
	});	

Теперь используя методы Ext.DomQuery, выведем данные из xml-файла в виде таблицы на панель:

Ext.onReady(function(){
    Ext.Ajax.request({
		url: 'xmlData.xml',
		success: function(response, options){
			var doc = response.responseXML;
			var root = Ext.DomQuery.selectNode('languages', doc);
			var langs=Ext.DomQuery.select('language', root);
			var lansData='<table class="tab" >';
			for(var i=0;i<langs.length;i++){
				lansData+='<tr><td>'+Ext.DomQuery.selectValue('position', langs[i])+'</td>';
				lansData+='<td>'+Ext.DomQuery.selectValue('title', langs[i])+'</td>';
				lansData+='<td>'+Ext.DomQuery.selectValue('rate', langs[i])+'</td></tr>';
			}
			lansData+='</table>';
			panel.update(lansData);
		},
		failure: function(response, options){
			alert("Ошибка: " + response.statusText);
		}
	});	

	var panel=Ext.create('Ext.panel.Panel', {
        title:'Приложение ExtJS 4',
        width: 300,
        height: 150,
        padding:10,
		bodyPadding:5,
        renderTo: Ext.getBody()
    });
});

comments powered by Disqus