I have found the solution is addressed in EXTJS 4 but not in earlier versions that I am familiar with (3.4): The namespaces character | was introduced in EXTJS 4 DomQuery
So if the example XML has a defined namespace such as xmlns:id="http://my.example.com/id
Then the XML with the namespace modified from before is:
<?xml version="1.0" encoding="UTF-8"?>
<users xmlns:id="http://my.example.com/id">
<id:user attr="test ed">
<id:id>1</id:id>
<id:name>
<id:first attr2="test ed 2">Ed</id:first>
<id:last>Spencer</id:last>
</id:name>
<id:email>ed@sencha.com</id:email>
</id:user>
<id:user attr="test abe">
<id:id>2</id:id>
<id:name>
<id:first attr2="test ed 2">Abe</id:first>
<id:last>Elias</id:last>
</id:name>
<id:email>abe@sencha.com</id:email>
</id:user>
</users>
So that the following EXTJS code will then work fields: [{ name: "id", mapping: 'id|id'}
that is the full solution is
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script>
<script>
function getResult()
{
document.getElementById("demo").innerHTML=
"<p>First Record Id is: " + test.data.items[0].data.id + "</p>" +
"<p> First Name is: " + test.data.items[0].data.first + "</p>" +
"<p> Last Name is: " + test.data.items[0].data.last + "</p>" +
"<p> Email is: " + test.data.items[0].data.email + "</p>" +
"<p> Attribute 1 is: " + test.data.items[0].data.attr + "</p>" +
"<p> Attribute 2 is: " + test.data.items[0].data.attr2 + "</p>";
}
var test;
Ext.onReady(function () {
Ext.define('User', {
extend: 'Ext.data.Model',
autoload: true,
fields: [{ name: "id", mapping: 'id|id'},
{ name: "first", mapping: 'id|name>id|first'},
{ name: "last", mapping: 'id|name>id|last'},
{ name: "email", mapping: 'id|email'},
{ name: "attr", mapping: '@attr'},
{ name: "attr2", mapping: "id|name>id|first[@attr2='test ed 2']"}]
});
var store = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : 'users.xml',
reader: {
type: 'xml',
record: 'id|user',
root: 'users'
}
}
});
store.load();
test = store;
});
</script>
</head>
<body>
<h1>EXTJS Example</h1>
<p id="demo">Here we try to load XML into an EXTJS XML Reader</p>
<button type="button" onclick="getResult();">getResult</button>
</body>
</html>
Also note that if the namespace is used in the root element before the namespace is defined then the root definition in the XML reader needs to use the : not the | character i.e
root: 'id:users'