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);

在上面的代码段中，我通过执行object然后使用{{1}将 HTML字符串作为 jQuery $(html)加载通过获取所有使用selectors CSS类的元素。

但是，我已尝试使用.sub使用 ExtJS 复制相同内容但未成功。

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

Ext.DomHelper

我正在通过互联网进行搜索，但在很多示例中，他们使用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 4.2.0 ：http://docs.sencha.com/extjs/4.2.0/#!/api/Ext-method-select的API文档。然后我得到了我的ExtJS变量，并且不知道还有什么要做。

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);

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

1 个答案: