之前：

Question

在下面的extJS页面中，当我点击按钮时，HTML Div“buttonInfo”的内容会正确更改。

我还希望更改使用extJS创建的面板的内容。

但是，当我更改面板的内容时，我会更换整个面板。

如何在按钮的点击处理程序中更改面板对象的内容？

之前：

alt text

后：

alt text

<!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">
        <style type="text/css">
            body {
                padding: 20px;
            }
            div#infoBox {
                margin: 10px 0 0 0;
                width: 190px;
                height: 100px;
                background-color: lightblue;
                padding: 10px;
            }
            div#content {
                margin: 10px 0 0 0;
            }
            div.x-panel-body {
                padding: 10px;
            }
        </style>
        <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="ext/ext-all-debug.js"></script>
        <title>Simple extJS</title>
        <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
            Ext.onReady(function(){

                Ext.get('buttonInfo').on('click', function(){
                    Ext.get('infoBox').update('This is the <b>new</b> content.');
                    Ext.get('panel1').update('new info');
                    //Ext.get('panel1').html = 'new info111'; //doesn't work
                    //panel1.html = 'new info222'; //doesn't work
                });

                new Ext.Panel({
                    id: 'panel1',
                    renderTo: 'content',
                    width: '210px',
                    title: 'Extended Info',
                    html: 'original text',
                    collapsible: true
                });

            });            
        </script>
    </head>
    <body>
        <button id="buttonInfo">
            Show Info
        </button>
        <div id="infoBox">
        </div>
        <div id="content-wrapper">
            <div id="content"></div>
        </div>
    </body

＆GT;

Answer 1

Ext.get为你提供了dom对象，使用Ext.getCmp代替它返回Ext对象，然后你可以在面板上使用update方法：

尝试：

Ext.getCmp（'panel1'）。update（'new info'）;

希望它有所帮助。

Answer 2

尝试：

var Data = 'new info'; panel1.overwrite(panel1.body, Data); panel1.doComponentLayout();

我怎样才能操作extjs面板的内容，因为我可以使用DOM元素？

之前：

后：

2 个答案: