Javascript 使用window.document.getElementById访问Ext JS组件

是否可以使用window.document.getElementById访问Ext JS组件？

---

这代替了使用Ext.getCmp。

不，您将获得没有ExtJS包装器的本机对象。

通过元素查找组件实际上相当简单；每个组件都有一个主元素，其

id

属性与组件的

id

匹配。所以我们可以这样做：

function findComponentByElement(node) {
    var topmost = document.body,
        target = node,
        cmp;

    while (target && target.nodeType === 1 && target !== topmost) {
        cmp = Ext.getCmp(target.id);

        if (cmp) {
            return cmp;
        }

        target = target.parentNode;
    }

    return null;
}

var node, cmp;

node = document.getElementById('foo');
cmp  = findComponentByElement(node);

如果您有一个Ext.Element实例而不是一个裸HTMLElement，只需传递其DOM指针即可：

var el, cmp;

el  = Ext.Element.getActiveElement(); // Currently focused element
cmp = findComponentByElement(el.dom);

哦，为了完整起见，下面介绍如何为HtmleElement获取Ext.元素包装器：

var node, el;

node = document.getElementById('bar');
el   = new Ext.Element(node);

---

为什么不想使用

getCmp

？我可以访问对象的数据吗？例如，获取面板的标题，获取面板中当前活动的选项卡，等等？通常是的，您将获得HtmleElement的实例。如果活动选项卡有一些特定的css类，那么您可以检查它，如果您知道面板标题元素的Id，您可以得到它的文本，但它将不是ExtJSAPI。这将是“本机”DOM操作，您只需获取panel.title，您必须找到确切的title DOM元素并获取其innterText属性tanks。但是我应该用什么身份证呢？它是否与ExtJSAPI中使用的ID相同。何时定义组件？（id:“字段）我记得-是的，使用浏览器开发工具查看标记（F12键，或在元素上单击鼠标左键-view/code（inspect元素））。