gpt4 book ai didi

extjs - 如何像操作 DOM 元素一样操作 extjs 面板的内容?

转载 作者:行者123 更新时间:2023-12-01 09:38:05 25 4
gpt4 key购买 nike

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

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

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

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

之前:

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

>

最佳答案

Ext.get 给你 dom 对象,使用 Ext.getCmp 代替它返回 Ext 对象,然后你可以使用面板上的更新方法:

试试:

Ext.getCmp('panel1').update('new info');

希望对你有帮助。

关于extjs - 如何像操作 DOM 元素一样操作 extjs 面板的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4202973/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com