What is the best way to replace ExtJS-generated DOM elements with new ExtJS elements?_问答_开发者

What is the best way to replace ExtJS-generated DOM elements with new ExtJS elements?

开发者 https://www.devze.com 2023-01-28 00:04 出处：网络

I am making a PHP/ExtJS framework which generates the base ExtJS Javascript on the first page visit, then via AJAX calls manipulates the DOM.

相关专题：extjs

I am making a PHP/ExtJS framework which generates the base ExtJS Javascript on the first page visit, then via AJAX calls manipulates the DOM.

So I need to be able to replace the specific DOM elements created by ExtJS with new DOM elements created by ExtJS.

In the following example, I want to replace the text in region_center with two panels.

However, renderTo only adds to the element, while applyTo replaces the content completely which prevents me from added e.g. 2 panels since the second one replaces the first one.

How can I easily manipulate ExtJS-generated Javascript so that I can replace regions of the screen with new content, e.g. in a menu in which one clicks on panels and the center_region is replaced with new content?

<!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开发者_StackOverflow>
    <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>

All classes extending Ext.Container (Ext.Panel included) have add() method which you can use to append new components, as well as remove() for removing them.

I see that in your code, you have used renderTo 'region_center'. I hope region_center should be a div. Try to include the renderTo: Ext.getBody() or renderTo: document.body. By using so your panel will get appended.