Problem with component loading with renderer of type "component"

[Bob Wilson]

Hi all,

I don't manage to load a component config dynamically with the renderer of type 'component'.
Here is the code :

var wizard_page_01 = Ext.create('Ext.form.Panel', {
	title: 'Dynamic form panel',
	height: 200,
	items: [
		{
			xtype: 'container',
			id: 'cp1',
			html: 'Click on the load button to load content',
			loader:{
				loadMask: true,
				removeAll: true,
				url:"../(AJAXGETCMP)?openagent",
				renderer: 'component',
				success: function()
				{
					alert('content loaded');
				}
			}
		}
	],
	tbar: [
		{
			text: 'LOAD',
			handler: function() {
				var dynamic = wizard_page_01.child('#cp1');
				dynamic.getLoader().load();
			}
		}
	]
});

If I remove the 'component' renderer option, then it loads correctly my server response content, but as html format, of course.

My server response is this :

{"success": true, "data": {id: 'newCmp', xtype: 'container', border: 1, height: 250, html: 'Content loaded successfully'}}

The Ext documentation is not clear about how the server response should be when it comes to 'component' renderer.

[evant]

It expects something that can be passed to container.add(). In this case you might want to use a custom renderer function. Would agree the docs could be beefed up a bit to indicate what they expect.

[Bob Wilson]

Ok, thank you for your answer.
I've read the API again, but my server response IS a component following the docs example.

What do I miss in the syntax ?
(note I've also tried to add some "[ ]" around the component config, just in case)

[evant]

What you're returning is a JSON block, the stuff inside "data" is what one should pass to a component.

So if your response is:

{id: 'newCmp', xtype: 'container', border: 1, height: 250, html: 'Content loaded successfully'}

It will work.

[Bob Wilson]

Ok, I'll try this in a few minutes because I got stucked into this for a long time now.
I just don't understand why my server should throw an answer which is not in the "Ajax way", with "success" : true/false in the response, and "data" tag as... the data.

Sounds strange to me.

Or maybe you mean that I have to parse the response and extract the "data" part of the JSON object ?
Not sure to understand.