How to async update a layout dialog?

[Bobafart]

I have an addListener for my grid. When the user clicks on a cell I want the layout dialog to update with the data from the cell click row.

My addListener code is partially here:


grid.addListener('cellclick',
function (grid, rowIndex, colIndex, e) {
var selectionModel = grid.getSelectionModel();
var record = selectionModel.getSelected();
var troopId = record.data['troopId'];
var troopName = record.data['troopName'];
alert(troopId, troopName);
if(colIndex==4){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("soldierDetails", {
modal:true,
width:600,
height:400,

....




I figure I need to do an async request to get the data.. but how do I update the center panel of the Layout Dialog with the results of the async request?



var parms = 'troopID=' + troopId;
var conn = new Ext.data.Connection();
conn.request({
url: "soldierDetails.php",
scripts:true,
params: parms,
scope:this


What is the proper way to do this?

[Animal]

You're overcomplicating it. You have a ContentPanel. So:

http://extjs.com/deploy/ext/docs/output/Ext.ContentPanel.html#load

[Bobafart]

I am trying to open a layout dialog that async loads XML data when the user clicks a row in a grid. The XML data that async loads changes based on the troopId column of the grid that was clicked.

I am using Animals suggestion above with panel.Load... but seeing that I have never used panel.Load before I am unsure where it goes in my code.

I assume it goes in the addListener which I have pasted below.

Please help!



// define the dialog variable
var dialog;
grid.addListener('cellclick',
function (grid, rowIndex, colIndex, e) {
var selectionModel = grid.getSelectionModel();
var record = selectionModel.getSelected();
var troopId = record.data['troopId'];
var troopName = record.data['troopName'];
// alert(troopId, troopName);
if(colIndex==4){
alert(troopId, troopName);
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("soldierDetails", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
west: {
split:true,
initialSize: 150,
minSize: 100,
maxSize: 250,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
dialog.load({
url: "detailedInfo.php",
params: {id: troopId}, // or a URL encoded string
// callback: yourFunction,
// scope: yourObject, //(optional scope)
discardUrl: false,
nocache: false,
text: "Loading...",
timeout: 30,
scripts: false
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('west', new Ext.ContentPanel('west', {title: 'Inventory'}));
layout.add('center', new Ext.ContentPanel('center', {title: 'Unit Profile'}));
// generate some other tabs
layout.add('center', new Ext.ContentPanel('statistics', {
autoCreate:true, title: 'Unit Statistics', background:true}));
layout.add('center', new Ext.ContentPanel('skills', {
autoCreate:true, title: 'Unit Skills', closable:true, background:true}));
layout.endUpdate();
}
dialog.show();

[Animal]

For starters pull that handler function out into a function definition rather than inlining it: Readability and maintaniability.

So have you tested that code? Stepped through it? Have you found a specific problem? What do you need?

[Bobafart]

Needless to say I tested it and played around with it.

dialog.load is not a function is the repeated error I get.

Can someone please give me some advice on how to utilize this?

[Animal]

Look at the BasicDialog docs. load is indeed not a function of BasicDialog.

It is a function of Element. Perhaps you want to update one of the Dialog's Elements (header, body and footer)

But you can't just dump XML into an HTML document. What do you really wwant to do with this XML?

[Bobafart]

I am using Ext.LayoutDialog.

I am trying to insert the XML data in the Layout Dialog based on the table column that is clicked. I have a column of soliders for a web game I am making for fun. If the player clicks on
"Specialty" I want the layout dialog to load detailed information about that soldier


Here is a non-working example:

http://gabbr.com/c/departmentofdefense/army/indexExt4.php

If you click on "Specialty" you will get an alert (the number alerted is the id of the soldier clicked which I use as the troopId parameter for the asyn request).

The Layout Dialog appears after the alert window (you may have to click the Specialty column a few times to play around with it). I am trying to get the "center" portion of the layout dialog to load the detailed information for the soldier.

Right now the center panel is displaying nothing (it is blank) and the Layout Dialog isn't rendering properly (the "Unit Statistics" tab is not displayed).

The obvious error is:
"Error: layout.load is not a function"

I am clearly doing something wrong with panel.load.. I am not sure where to put it in the code. I need further instructions on this (a demo or example or screencast would be great if anyone has a link to one)

[Animal]

RTFM.

http://extjs.com/deploy/ext/docs/output/Ext.LayoutDialog.html#getLayout

What does it return?

You update ContentPanels

And you cannot dump XML into an HTML document.

[Bobafart]

Can someone else give me a hand with this? Preferrably someone with some politeness?

I am unsure how to tackle the problem I posted 2 posts above this one.

If someone can point me to an example/demo/screencast that would be greatly appreciated.

[Animal]

What's "impolite" about the above posting?

You don't encounter Ext problems, you just don't try.