I am a new ExtJS4 user. Just started coding some samples. I am doing an AJAX example, where on the client side:
- I am creating 4 panels / attaching them to a Window in 'card' layout
- On clicking the buttons on bbar in the layout, a 'selPanelId' variable is set to reflect the selected panel ID
- this 'selPanelId' is then sent to the server via an AJAX rquest
- the server responds with appropriate data in an HTML string containing a TABLE structure
- on receiving the response, the client uses the 'html' property of the extjs component (the inner selected panel) to set this returned string as the html (so that the table can be rendered inside it)
Here is the ext code:
<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;
}
And here is the server jsp code:
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);
}
When I alert the xhr.responseText, it is showing correct output. When I use any other static table structure to render in the 'html' property of the component, it is still showing the table (rendering the html) correctly. but when I use .html = xhr.responseText, it does not render the html content.
I looked around here and found an alternate 'update' method on the component, which IS working, btw.
So, everything is fine, but I wanna know, why the 'html' property does not work and 'update' method works?
If you can clarify on this, thanks in advance :)
- Navin
