EXTJS 4.2 escape colon (:) in XML Tag for XML Reader

Question

I am trying to load atom pub CMIS 1.0 binding into EXTJS and the colons in the tags are stopping the XML reader from doing its work. For instance the xml looks like:

<atom:entry xmlns:atom="http://www.w3.org/2005/Atom" xmlns:cmis="http://docs.oasis-         open.org/ns/cmis/core/200908/" xmlns:cmisra="http://docs.oasis-open.org/ns/cmis/restatom/200908/" xmlns:app="http://www.w3.org/2007/app">
  <atom:author>
      <atom:name>system</atom:name>
   </atom:author>
   <atom:id>http://chemistry.apache.org/MTAz</atom:id>
   <atom:published>2013-11-28T00:01:22Z</atom:published>
   <atom:title>Folder1</atom:title>
   <app:edited>2013-11-28T00:01:22Z</app:edited>
   <atom:updated>2013-11-28T00:01:22Z</atom:updated>
   <cmisra:object xmlns:ns3="http://docs.oasis-open.org/ns/cmis/messaging/200908/">
      <cmis:properties>
         <cmis:propertyId queryName="cmis:allowedChildObjectTypeIds" displayName="Allowed Child Types" localName="cmis:allowedChildObjectTypeIds" propertyDefinitionId="cmis:allowedChildObjectTypeIds">
            <cmis:value>*</cmis:value>
         </cmis:propertyId>
         <cmis:propertyId queryName="cmis:objectTypeId" displayName="Type-Id" localName="cmis:objectTypeId" propertyDefinitionId="cmis:objectTypeId">
            <cmis:value>cmis:folder</cmis:value>
         </cmis:propertyId>
         <cmis:propertyString queryName="cmis:path" displayName="Path" localName="cmis:path" propertyDefinitionId="cmis:path">
            <cmis:value>/Root/396271/Folder1</cmis:value>
         </cmis:propertyString>
         <cmis:propertyString queryName="cmis:name" displayName="Name" localName="cmis:name" propertyDefinitionId="cmis:name">
            <cmis:value>Folder1</cmis:value>
         </cmis:propertyString>
..... etc.

For example if I consider a simple example

    <?xml version="1.0" encoding="UTF-8"?>
<users>
    <user attr="test ed">
        <id:number>1</id:number>
        <name>Ed Spencer</name>
        <email>ed@sencha.com</email>
    </user>
    <user attr="test abe">
        <id:number>2</id:number>
        <name>Abe Elias</name>
        <email>abe@sencha.com</email>
    </user>
</users>

And I use EXTJS code

Ext.onReady(function () {
   Ext.define('User', {
        extend: 'Ext.data.Model',
        autoload: true,
        fields: [{  name: "id", mapping: 'id:number'},
                         {  name: "name", mapping: 'name'},
                         {  name: "email", mapping: 'email'},
                         {  name: "attr", mapping: '@attr'}]
    });

    var store = Ext.create('Ext.data.Store', {
        model: 'User',
        proxy: {
            type: 'ajax',
            url : 'users.xml',
            reader: {
                type: 'xml',
                record: 'user',
                root: 'users'
            }
        }
    }); 

    store.load();

});

What do I put down for the mapping for id, or alternate code?

fields: [{  name: "id", mapping: 'id:number'} ????? escape the ':' some how?

I am trying to avoid writing a lot of custom XML parsing code if possible and rely on the EXTJS reader, and the CMIS 1.1 browser binding is not available for my ECM.

Answer 1

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'

Answer 2

I am also facing the same issue i am using extjs-4.2.1

my sample xml

<RDF>
    <Seq about="urn:productManagement:root" type="ROOT" ac:maxLevels="25">
        <li>
            <Description ac:name="name1" ac:type="type1"/>
        </li>
    </Seq>
</RDF>

---

Model for above xml

Ext.define('TR.model.TreeControlModel', {
    extend: 'Ext.data.Model',
        fields: [
            { name: 'about', mapping:'@about'},
            { name: 'type', mapping:'li>Description@ac:type'},
           { name: "name", mapping:'li>Description@ac:name'}
        ]
});

I tried pipe replacing : with | but it didn't work for me. Need help.