如何像处理DOM元素一样处理extjs面板的内容？_Extjs

如何像处理DOM元素一样处理extjs面板的内容？

extjs

如何像处理DOM元素一样处理extjs面板的内容？,extjs,Extjs,在下面的extJS页面中，当我单击按钮时，HTML Div“buttonInfo”的内容将正确更改我还想更改我用extJS创建的面板的内容然而，当我像修改div一样修改面板的内容时，整个面板就被简单地替换了如何从按钮的单击处理程序中更改面板对象的内容？之前：之后：身体{ 填充：20px； } div#信息箱{ 利润率：10px0；宽度：190px；高度：100px；背景颜色：浅蓝色；填充：10px； } 分区内容{ 利润率：10px0； } 第x部分-面板-主体{ 填充

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

我还想更改我用extJS创建的面板的内容

然而，当我像修改div一样修改面板的内容时，整个面板就被简单地替换了

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

之前：

之后：


身体{
填充：20px；
}
div#信息箱{
利润率：10px0；
宽度：190px；
高度：100px；
背景颜色：浅蓝色；
填充：10px；
}
分区内容{
利润率：10px0；
}
第x部分-面板-主体{
填充：10px；
}
简单extJS
Ext.BLANK_IMAGE_URL='Ext/resources/images/default/s.gif'；
Ext.onReady（函数（）{
Ext.get（'buttonInfo'）。在（'click'，function（）上{
Ext.get（'infoBox'）.update（'这是新内容'）；
Ext.get（'panel1'）。update（'new info'）；
//Ext.get（'panel1'）.html='newinfo111'；//不起作用
//panel1.html='newinfo222'；//不起作用
});
新分机面板({
id:'panel1'，
renderTo:'内容'，
宽度：“210px”，
标题：“扩展信息”，
html:“原始文本”，
可折叠：正确
});
});            
显示信息
Ext.get为您提供了dom对象，请改用Ext.getCmp使其返回Ext对象，然后您可以使用面板上的更新方法：
尝试：
Ext.getCmp（'panel1'）。update（'new info'）
希望有帮助。
试试：
var数据='新信息'；
panel1.覆盖（panel1.body，数据）；
panel1.doComponentLayout（）
如果您安装了firebug，那么您可以很容易地看到差异。谢谢，这是我一直在寻找的方法，我有对象，所以我可以这样做：Ext.getCmp（'infoBox2'）。setWidth（333）；请记住，update不仅仅是某种简单的innerHTML包装器，它还更新组件上指定的布局所使用的数据，因此您可能需要调用doLayout（）；在调用update之后。如果不在脚本上运行，唯一的选择是：Ext.getCmp（'panel1'）。update（'newinfo'）
<!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