3
在下面的extJS頁面中，當我單擊該按鈕時，HTML Div的「buttonInfo」內容正確更改。如何操作extjs面板的內容，因爲我可以使用DOM元素？
我想改變我用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
>
如果您已經安裝螢火蟲，那麼你可以很容易地看到其中的差別。 – 2010-11-17 09:31:04
謝謝你是我正在尋找的方法，我有對象，所以我可以做這樣的事情：Ext.getCmp（'infoBox2'）。setWidth（333）; – 2010-11-17 09:44:20
請記住，更新不僅僅是一種簡單的innerHTML包裝器，它更新組件上指定的佈局使用的數據，因此您可能需要調用doLayout（）;在電話更新後。 – SBUJOLD 2010-11-19 18:06:04