javascript - 如何将 HTML 字符串作为 ExtJS 对象/元素加载以使用选择器

Question

我正在使用 ExtJS 4.2.0，我想知道是否可以加载 HTML 字符串 来获取 ExtJS object/element为了使用selectors .

为了更具体，我将放以下代码片段来了解情况:

(我使用jQuery，因为我对它更熟悉，并且代码仍然可以理解，以显示我正在尝试使用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);

在上面的代码片段中，我将 HTML 字符串加载为 jQuery object通过这样做$(html)然后使用 selectors通过获取所有使用 .sub 的元素CSS 类。

但是，我尝试使用 Ext.DomHelper 与 ExtJS 复制相同的内容。没有成功。

现场演示: http://jsfiddle.net/uaBj4/

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

我在互联网上搜索，但在很多例子中他们使用 listener这会影响 component已经创建，然后获取 dom元素，或者在其他情况下，他们使用 Ext.fly(..)或Ext.select(..)操作 dom 中已存在的元素这不是我的情况，也不是我想做的事情。

<小时/>

更新:我注意到我正在使用 Ext.select(..)错误的方法! (如旧的 ExtJS 版本)。检查 ExtJS 4.2.0 的 API 文档:http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-select 。然后我刚刚得到了我的obj变量，不知道还要做什么。

Answer 1

我最终使用以下方法做到了。

现场演示: 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);