Question

我正在创建一个PHP / ExtJS框架，它在第一页访问时生成基本ExtJS Javascript，然后通过AJAX调用操作DOM。

所以我需要能够用ExtJS创建的新DOM元素替换ExtJS创建的特定DOM元素。

在以下示例中，我想将region_center中的文本替换为两个面板。

但是，renderTo只会添加到元素中，而applyTo会完全替换内容，这会阻止我添加内容，例如自第二个面板取代后的第二个面板。

如何轻松操作ExtJS生成的Javascript，以便我可以用新内容替换屏幕区域，例如在菜单中，单击面板并将center_region替换为新内容？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js">
        </script>
        <script type="text/javascript" src="ext/ext-all-debug.js">
        </script>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js">
        </script>
        <title>Test of RenderTo</title>
        <script type="text/javascript">
            Ext.onReady(function(){
                new Ext.Panel({
                    id: 'new_content1',
                    renderTo: 'region_center',
                    title: 'the title',
                    margins: '10 10 10 10',
                    html: 'content1 added by extjs'
                });
                new Ext.Panel({
                    id: 'new_content2',
                    renderTo: 'region_center',
                    title: 'the title',
                    margins: '10 10 10 10',
                    html: 'content2 added by extjs'
                });
            });
        </script>
    </head>
    <body>
        <h1 class="main">Test of renderTo:</h1>
        <div id="region_center" class=" x-panel x-border-panel" style="left: 220px; top: 43px; width: 1478px;">
            <div class="x-panel-bwrap" id="ext-gen9">
                <div class="x-panel-body x-panel-body-noheader" id="ext-gen10" style="padding: 10px; overflow: auto; width: 1456px; height: 620px;">
                    this is the original text and should be replaced
                </div>
            </div>
        </div>
    </body></html>

Answer 1

扩展Ext.Container（包括Ext.Panel）的所有类都有add（）方法，您可以使用它来附加新组件，以及remove（）以删除它们。

Answer 2

我在您的代码中看到，您使用了renderTo 'region_center'。我希望region_center应该是div。尝试添加renderTo: Ext.getBody()或renderTo: document.body.使用，这样您的面板就会被追加。

使用新的ExtJS元素替换ExtJS生成的DOM元素的最佳方法是什么？

2 个答案: