PDA

View Full Version : how can I update a panel HTML with AJAX



noamway
13 Dec 2012, 8:14 AM
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
13 Dec 2012, 9:21 AM
You might check out the loader config
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-loader

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



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
13 Dec 2012, 9:40 AM
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
13 Dec 2012, 9:47 AM
Looks like you can use:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader-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
13 Dec 2012, 10:00 AM
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
13 Dec 2012, 3:58 PM
What if you take the autoLoad off of your panel's loader's config orignally since you're loading it manually?

noamway
13 Dec 2012, 10:52 PM
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