Need help passing result of Ajax GET to an item in a panel

[csoon1]

I need to pass the response of an Ajax request to an Accordion item. my code (just simplified) looks like:

Ext.Ajax.request({
  method: 'GET',
  url:'test.cgi',
  success: function(response) {
    // Need to pass response.responseText to the html on the item below
  }
});

var testitem1 = new Ext.Panel({
  title: 'Test Item 1',
  html: // I wanted to pass the above response.responseText here
});

I thought declaring a variable globally... then modifying its value locally will permanently modify the variable's value... making such value accessible even on other functions. My code below didn't work:

var lazy = ''; // the global variable
Ext.Ajax.request({
  method: 'GET',
  url:'test.cgi',
  success: function(response) {
    lazy = response.responseText;
  }
});

var testitem1 = new Ext.Panel({
  title: 'Test Item 1',
  html: lazy
});

Please let me know a professional way of doing this. Thanks!

[andycramb]

Have you had a look at the autoLoad config option of the Panel class.
If you don't want to update on render you could retrieve the updater using the getUpdater method and use the returned updater object.

[csoon1]

Have you had a look at the autoLoad config option of the Panel class.
If you don't want to update on render you could retrieve the updater using the getUpdater method and use the returned updater object.

Okay I got to update the html in my panel through autoLoad... however I have some more questions if you don't mind. Below is the updated code:

Note: I removed the Ajax request in the original post and used....

var testitem1 = new Ext.Panel({
  title: 'Test Item 1',
  autoLoad: {
    url: 'test.cgi',
    method: 'GET',
    params: 'test'    // Not  intended but this would be my first question
  }
});

My test.cgi script only has this simple code:

print qq|Content-type: text/xml\n\n
<news><headline>$head</headline><msg>$msg</msg></news>|;

Now when I load the my page... a request is made to the .cgi script and the response is received... and the content of my Panel is updated to show the returned xml content. However....

1) How come the page is blank if I remove params: 'test' from autoLoad? I am only trying to 'GET' something from the server so I don't need params.

2) Is there a way I can play with the response received? I tried this on the autoLoad:

callback: function(response) {
  alert(response.responseText);
}

but the alert box shows "undefined". I am expecting to see the responseText. The reason why I want to play with the response is somehow I wanted to update the title of my Panel.

Overall, this is what I wanted to achieve with my end application:
a. The item is for an Accordion layout. The item in the accordion would show some news items... that's why I'm trying to pull the data (which is the news body)... and autoloading it on the item.
b. I wanted the news headline to be the title of the item.

Thanks for your help.

[csoon1]

bump

[mschwartz]

var testPanel = new Ext.Panel({
  id: 'test-panel',
  title: 'test panel'
});

// after the panel is rendered:
Ext.Ajax.request({
  method: 'POST',  // I always post
  url: 'whatever.pl', // looks like you use perl
  params: { ... }, // whatever you want to pass
  success: function(response) {
    Ext.getCmp('test-panel').body.update(response.responseText);
  }
});

[csoon1]

thanks. it's just what i wanted.

[andycramb]

This post points to another solution which could be an option as well. The solution is below and uses the panels render event to the get the updater object and custom render the response.

listeners:{
	render:{
		fn:function(){
			this.getUpdater().setRenderer({
				render:function(targetEl,response){
					reviewTemplate.overwrite(targetEl,Ext.decode(response.responseText).data);
				}
			})
		},
		single:true
	}
}