代码之家 › 专栏 › 技术社区 › Edward Tanguay

如何像处理dom元素一样处理extjs面板的内容?

extjs

Edward Tanguay · 技术社区 · 14 年前

在下面的extjs页面中,当我单击按钮时,html div“buttonInfo”的内容会正确更改。

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

但是,当我像执行DIV一样更改面板的内容时,整个面板都会被简单地替换。

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

之前:

后:

<!文档类型HTML> & HTML& GT; &头; <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”> 身体{ 填料:20px; } DIV信息箱边距:10px 0 0 0; 宽度:19px; 高度:100px; 背景色:浅蓝色; 填料:10px; } DIVα含量{ 边距:10px 0 0 0; } 第X部分-面板-主体{ 填料:10px; } &风格/风格; <script type=“text/javascript”src=“ext/adapter/ext/ext base.js”></script> <script type=“text/javascript”src=“ext/ext all debug.js”></script> <title>简单extjs</title> <script type=“text/javascript”> ext.blank_image_url='ext/resources/image s/default/s.gif'; ext.onready(函数()){ ext.get('buttonInfo')。on('click',function()。{ ext.get(“infobox”).update(“这是新的内容”); ext.get(“panel1”).update(“新信息”); //ext.get('panel1').html='new info111';//不起作用 //panel1.html='new info222';//不起作用 (}); 新子项({ ID:“PANEL1”, renderto:'内容', 宽度:“210px”, title:'扩展信息', html:'原始文本', 可折叠:真 (}); (}); & /脚本& GT; 和/头& GT; 和身体; <button id=“buttonInfo”> 显示信息 &按钮/按钮; <div id=“infobox”> &L/DIV & GT; <div id=“content wrapper”> <DIV id=“content”></DIV> &L/DIV & GT; 和/身体 < /代码> 我还想更改用extjs创建的面板的内容。但是,当我像执行DIV一样更改面板的内容时,整个面板都会被简单地替换。如何从按钮的单击处理程序中更改面板对象的内容? 之前: 后: <!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 >

2 回复 | 直到 11 年前

J Fong 14 年前

ext.get为您提供了dom对象,请改用ext.getcmp,以便它返回ext对象,然后您可以使用面板上的update方法:

尝试:

ext.getcmp(“panel1”).update(“新信息”);

希望它有帮助。

Rogerio de Moraes 11 年前

尝试:

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