Question

I’d like to use the Ext.Element object interface from ExtJS to traverse an XML response which I get from a AJAX request like this:

  loadModel: function() {
        console.log('Load Model....');
        var conn = new Ext.data.Connection;
        conn.request({
            url: 'partsV10.xml',
            callback: function(options, success, response) {
                if (success) {
                    var modelDom = response.responseXML.documentElement;
                    this.buildUi(modelDom)
                    this.getDasPanel().doLayout();
                }
            },
            scope: this
        });
    }

Which works pretty well. After getting the repsonse from the AJAX request, from my understanding, I have two possible ways to continue with my data:

1. Use the standard JavaScript functions in a way like this:
   buildUi: function (currentElement, depth) {
   if (currentElement) {

       var j;
       var tagName = currentElement.tagName;
       console.log(tagName);
   
       // Traverse the tree
       var i = 0;
       var currentElementChild = currentElement.childNodes[i];
       while (currentElementChild) {
           if (currentElementChild.nodeType == 1) {
               // Recursively traverse the tree structure of the child node
               this.buildUi(currentElementChild, depth + 1);
           }
           i++;
           currentElementChild = currentElement.childNodes[i];
       }
   }
   

   }

2. I could benefit from the cross-browser compatible Ext.Element!? But I can’t figure out, how to “cast” my repsonse to an Ext.Element so that I can use the up-, down etc function.

Any help or suggestion is really appreciated!

Thanks in advance

Chris

Answer 1

After digging more into ExtJS and all the little details, I’m able to answer my own question now. After reading the XMLResponse, I can use the Ext.DomQuery for traversing the dom. The XML DOM document can be provided by a second optional parameter call “root”, kind a obvious I’ve to admit.

So one way to query the XML DOM response for nodes that are called “item-option” you can use something like:

var options = Ext.DomQuery.select('item-option', modelDom);

Leaving the second parameter out, the parameter defaults to the standard document dom.