how can I update a panel HTML with AJAX

[noamway]

Hi,

This is my code:

	Ext.onReady(function() {
		Ext.create('Ext.panel.Panel', {
			id:'hello',
			title: 'Hello',
			width: 200,
			html: '<p>World!</p>',
			renderTo: Ext.getBody()
		});
	});

I like to load the panel with an URL address and not with the HTML.

1. How can I write that?
2. How can I update the panel HTML after the page load? In 3 version I know there was "load" option.

Thanks for the help

[slemmon]

You might check out the loader config
http://docs.sencha.com/ext-js/4-1/#!...ent-cfg-loader

That will accept configs from
http://docs.sencha.com/ext-js/4-1/#!...omponentLoader

Ext.create('Ext.panel.Panel', {
    height: 300,
    width: 300,
    loader: {
        url: 'content.html',
        autoLoad: true          // to load automatically when the panel is instantiated
    },
    renderTo: Ext.getBody()
});

[noamway]

It's working great thanks, what about updating the URL after the page load, in version 3 I use "load" but I can't make it work now.

Thanks for the help

[slemmon]

Looks like you can use:
http://docs.sencha.com/ext-js/4-1/#!...er-method-load

You can then pass in a new url (that will overwrite what was there originally by the looks of it)

// get the panel's loader
var myLoader = myPanel.getLoader();

// load the content using a new loader config
myLoader.load({
    url: 'myNewUrl.html'
    // , params: { foo: 'bar' }            // any params you want to pass to the loader's url
})

[noamway]

Thanks, I try this code:

	Ext.onReady(function() {

		Ext.create('Ext.panel.Panel', {
			id:'hello',
			title: 'Hello',
			width: 200,
			loader: {
				url: '/',
				autoLoad: true          // to load automatically when the panel is instantiated
			},
			renderTo: Ext.getBody()
		});

		// get the panel's loader
		var myLoader = Ext.getCmp('hello').getLoader();

		// load the content using a new loader config
		myLoader.load({
			url: '/noam.html'
			// , params: { foo: 'bar' }            // any params you want to pass to the loader's url
		})

	
	});

And I'm getting this error message with Chrome:

Cannot read property 'scope' of undefined

This is the code in the debug file:

    onComplete: function(options, success, response) {
        var me = this,
            active = me.active,
            scope = active.scope,

Thanks

[slemmon]

What if you take the autoLoad off of your panel's loader's config orignally since you're loading it manually?

[noamway]

Yes, without 'autoLoad' it's working, but if it's working only like that, why do I need the load option in the beginning? weird.

Thanks for your help