CODEWITHSUNDEEP
ajaxdomextjsxmlhttprequest
Chris
Chris

Reputation: 2374

ExtJS DOM handling for XMLHTTPRequest.repsonseXML

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

Upvotes: 3

Views: 1231

Answers (1)

Chris
Chris

Reputation: 2374

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.

Upvotes: 2

Related Questions