How to load HTML string as an ExtJS object/element to use selectors

Question

I am using ExtJS 4.2.0 and I was wondering if it's possible to load an HTML string to get an ExtJS object/element in order to use selectors.

In order to be more specific, I will put the following code snippet to understand the situation:

(I am using jQuery since I am more familiar with it and the code is still understandable to show what I'm trying to do with ExtJS).

var html = '<div id="wrapper">' +
    '<div class="sub">One</div>' +
    '<div class="sub">Two</div>' +
    '<div class="sub">Three</div>' +
    '</div>';

var elems = $(html).find('.sub');
console.log(elems);

In the above code snippet, I am loading the HTML string as a jQuery object by doing $(html) and then using selectors by getting all elements that are using .sub CSS class.

However, I've tried the following to replicate the same with ExtJS by using Ext.DomHelper without success.

Live Demo: http://jsfiddle.net/uaBj4/

var obj = Ext.DomHelper.createDom(html);
var arr = Ext.select('.sub', obj);
console.log(arr.elements);

And I was searching over the internet but in many examples they use a listener which affects a component that was already created and then grab the dom element or, in other cases, they use Ext.fly(..) or Ext.select(..) to manipulate an element that already exists in dom which is not my case or what I'm trying to do.

Update: I noticed that I was using Ext.select(..) the wrong way! (like old ExtJS versions). Check API docs for ExtJS 4.2.0: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-select. Then I just got my obj variable and don't know what more to do.

maybe extjs doesn't provide any simple tools. you can do var d=document.createElement("div"); d.innerHTML=html; instead of $(html) — dandavis
@dandavis I'm not sure about it, that's why I am asking. Using simple javascript will be my last resource. — Oscar Jara
Although it is possible and easy to manipulate DOM by Ext, I usually do not need to think html. I think higher level components: toolbar, button, menu, window, etc. - the html Ext produces is not interesting. What exactly do you want to achieve? Maybe there's another way. — Saki
@Saki This is what I got: I make an ajax call to a rest service which returns XML or JSON. Then I unmarshal the response using ExtJS, after that I use Ext.String.htmlDecode to retrieve HTML entities from the response. Finally, I pass the HTML to a panel component (by using html property). — Oscar Jara

Oscar Jara Oscar Jara · Accepted Answer · 2014-07-17T21:18:28

I finally did it using the following approach.

Live Demo: http://jsfiddle.net/n36d2/

// Sample html string
var html = '<ul id="list">' +
    '<li>One</li>' +
    '<li>Two</li>' +
    '<li>Three</li>' +
    '</ul>';

// Create wrapper html element
var wrapper = document.createElement('div');
// Add html string as 'innerHTML'
wrapper.innerHTML = html;
// Create 'dom' element
var dom = Ext.fly(wrapper);
// Use selector in 'dom' element
var li = dom.select('#list > li');
// Print all 'li' elements
console.log(li.elements);

How to load HTML string as an ExtJS object/element to use selectors

1 Answers