我是 ExtJS4 的新用户。刚开始编写一些示例。我正在做一个 AJAX 示例，在客户端：
- 我正在创建 4 个面板/将它们附加到“卡片”布局中的窗口
- 单击布局中 bbar 上的按钮时，会设置一个“selPanelId”变量以反映所选面板 ID
- 然后通过 AJAX 请求将此“selPanelId”发送到服务器
- 服务器以包含 TABLE 结构的 HTML 字符串中的适当数据进行响应
- 收到响应后，客户端使用 extjs 组件（内部选定面板）的“html”属性将此返回的字符串设置为 html（以便可以在其中呈现表格）
这是分机代码：
<script type="text/javascript">
var selPanelId='';
function OnReady()
{
var str="<table border>";
str+="<tr> <td rowspan='4'> <img src='images/nad.jpg'/> </td> <td> <b>Name:</b> </td> <td> Rafael Nadal </td> </tr>";
str+="<tr> <td> <b>Ranking:</b> </td> <td> 4 </td> </tr> ";
str+="<tr> <td> <b>Country:</b> </td> <td> Spain </td> </tr> ";
str+="<tr> <td> <b>Age:</b> </td> <td> 27 </td> </tr> ";
str+="</table>";
var panel1 = Ext.create('Ext.panel.Panel',{
title: "Novak Djokovic",
id:'djo',
margins:'5 5 5 5',
height:250,
width:250
});
var panel3 = Ext.create('Ext.panel.Panel',{
title: "Roger Federer",
id:'fed',
margins:'5 5 5 5',
height:250,
width:250
});
var panel2 = Ext.create('Ext.panel.Panel',{
title: "Andy Murray",
id:'mur',
margins:'5 5 5 5',
height:250,
width:250
});
var panel4 = Ext.create('Ext.panel.Panel',{
title: "Rafael Nadal",
id:'nad',
margins:'5 5 5 5',
height:250,
width:250
});
var card = Ext.create('Ext.window.Window',{
title:"Tennis Photo Filmstrip",
height:350,
width:350,
layout:'card',
items:[panel1,panel2, panel3,panel4],
activeItem: 0,
bbar:
[
{
id:'1',
text:'Novak Djokovic',
handler: function(button) {doAjax(button); card.layout.setActiveItem('djo');}
},
{
id:'2',
text:'Andy Murray',
handler: function(button) {doAjax(button);card.layout.setActiveItem('mur');}
},
{
id:'3',
text:'Roger Federer',
handler: function(button) {doAjax(button);card.layout.setActiveItem('fed');}
},
{
id:'4',
text:'Rafael Nadal',
handler: function(button) {doAjax(button);card.layout.setActiveItem('nad');}
}
]
});
card.show();
}
Ext.onReady(OnReady);
function doAjax(button)
{
// alert(button.id);
if (button.id=='1')
selPanelId = 'djo';
else if (button.id=='2')
selPanelId = 'mur';
else if (button.id=='3')
selPanelId = 'fed';
else if (button.id=='4')
selPanelId = 'nad';
else
selPanelId = 'djo';
// alert(selPanelId)
Ext.Ajax.request({ url: 'AJAX.jsp',
success: success, failure: failure,
params: {id: selPanelId}
});
}
function success (xhr)
{
Ext.get(selPanelId).update(xhr.responseText);
}
function failure (xhr)
{
alert(xhr.statusText);
Ext.get(selPanelId).html = xhr.statusText;
}
这是服务器jsp代码：
String playerID = request.getParameter("id");
System.out.print("player id : " + playerID);
String str = "";
if (playerID != null)
{
if (playerID.equals("djo"))
{
str+="<table>";
str+="<tr> <td rowspan='4'> <img src='images/djo.jpg'/> </td> <td> <b>Name:</b> </td> <td> Novak Djokovic </td></tr>";
str+="<tr> <td> <b>Ranking:</b> </td> <td> 1 </td> </tr> ";
str+="<tr> <td> <b>Country:</b> </td> <td> Serbia </td> </tr> ";
str+="<tr> <td> <b>Age:</b> </td> <td> 26 </td> </tr> ";
str+="</table>";
}
else if (playerID.equals("nad"))
{
str+="<table>";
str+="<tr> <td rowspan='4'> <img src='images/nad.jpg'/> </td> <td> <b>Name:</b> </td> <td> Rafael Nadal </td></tr>";
str+="<tr> <td> <b>Ranking:</b> </td> <td> 4 </td> </tr> ";
str+="<tr> <td> <b>Country:</b> </td> <td> Spain </td> </tr> ";
str+="<tr> <td> <b>Age:</b> </td> <td> 27 </td> </tr> ";
str+="</table>";
}
else if (playerID.equals("fed"))
{
str+="<table>";
str+="<tr> <td rowspan='4'> <img src='images/fed.jpg'/> </td> <td> <b>Name:</b> </td> <td> Roger Federer </td></tr>";
str+="<tr> <td> <b>Ranking:</b> </td> <td> 3 </td> </tr> ";
str+="<tr> <td> <b>Country:</b> </td> <td> Switzerland </td> </tr> ";
str+="<tr> <td> <b>Age:</b> </td> <td> 31 </td> </tr> ";
str+="</table>";
}
else
{
str+="<table>";
str+="<tr> <td rowspan='4'> <img src='images/mur.jpg'/> </td> ";
str+="<td> <b>Name:</b> </td> <td> Andy Murray </td> </tr> ";
str+="<tr> <td> <b>Ranking:</b> </td> <td> 2 </td> </tr> ";
str+="<tr> <td> <b>Country:</b> </td> <td> Great Britain </td> </tr> ";
str+="<tr> <td> <b>Age:</b> </td> <td> 26 </td> </tr> ";
str+="</table>";
}
out.println(str);
System.out.println(str);
}
当我提醒 xhr.responseText 时，它显示正确的输出。当我使用任何其他静态表结构在组件的“html”属性中呈现时，它仍然正确显示表（呈现 html）。但是当我使用 .html = xhr.responseText 时，它不会呈现 html 内容。
我环顾四周，发现组件上的另一种“更新”方法，它正在工作，顺便说一句。
所以，一切都很好，但我想知道，为什么“html”属性不起作用而“更新”方法起作用？
如果你能澄清这一点，在此先感谢:)
- 纳文