Question

我有一个Kohana框架，它在一个视图中构建ExtJS对象，然后使用此函数加载（通过JQuery AJAX）其中的其他视图：

function replaceContentOnClick(id, route) {
    $('body').delegate(('#' + id), 'click', function(){
        $.get(route, function(data) {
            $('#region_center .x-panel-body').html(data);
        });
    });
}

这很好但只有当这些子视图只是HTML / Javascript / JQuery时，但是在子视图中我无法显示任何ExtJS对象，即使我将它们呈现给存在的DOM元素，我也可以成功附加JQuery元素。就好像那时ExtJS不存在DOM。

主要问题是： JQuery代码成功填充元素：

<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>

但是 ExtJS代码无法填充相同的元素（Firebug / Net面板中没有报告错误）：

<script type="text/javascript">
    var region_center = new Ext.Panel({
        id: 'region_center',
        region: 'center',
        renderTo: '#region_center .x-panel-body',
        margins:'10 10 10 10',
        padding:'10 10 10 10',
        autoScroll:true,
        html: 'this is from ExtJS...'
    });
</script>

我必须做什么才能让ExtJS像JQuery一样访问DOM元素？

Answer 1

这两段代码正在做不同的事情。这段代码：

<script type="text/javascript">
$('#region_center .x-panel-body').html('this is from jquery...');
</script>

...正在'#region_center .x-panel-body'访问DOM节点并注入新的innerHTML值。这段代码：

<script type="text/javascript">
    var region_center = new Ext.Panel({
        id: 'region_center',
        region: 'center',
        renderTo: '#region_center .x-panel-body',
        margins:'10 10 10 10',
        padding:'10 10 10 10',
        autoScroll:true,
        html: 'this is from ExtJS...'
    });
</script>

...正在尝试将一个完整的Panel组件呈现给自己（即renderTo配置指向id为'region_center'的面板，这是面板本身）。这没有任何意义，也无法奏效。您只能将组件呈现给现有DOM节点 - 在此示例中，没有现有的DOM节点，其id为'region_center'，因为该面板尚未（且无法）呈现。

完全按照你在jQuery中执行的操作的等效代码是：

<script type="text/javascript">
Ext.get('#region_center').child('.x-panel-body').update('this is from Ext...');
</script>

假设运行它时DOM中的所有内容都相同，它应该像jQuery代码一样执行。

现在，假设您的BorderLayout已正确呈现，并且它实际上具有id为'region_center'的中心区域，您应该能够动态添加新面板（确保新面板的id是唯一的）。请注意，最好通过组件API（而不是DOM API）来执行此操作，因为在这种情况下将为您管理布局。例如，你想做的事情如下：

// assuming myCenterPanel is a valid *component* ref (NOT a DOM element):
myCenterPanel.add(new Ext.Panel(...));
myCenterPanel.doLayout();

您还需要确保中心面板具有指定的适当布局（通过布局配置）。如果您只是将新面板直接渲染到底层DOM节点（正如您上面尝试的那样），它可能可以工作，但从长远来看可能会导致其他问题（同样，因为在这种情况下你绕过了Ext的布局管理器。）

JQuery可以访问DOM而不是ExtJS的原因是什么？

1 个答案: