PDA

View Full Version : How to insert html in Ext JS object



Zanisimo
7 Jan 2011, 12:19 AM
Hi, i`m new in Ext JS.

I need to add some html to a Ext JS object after Ajax call. Not just simple text, but html with many tags and my styling added to them. I can`t seem to find how to do this. I am doing something like this:

success: function(response) {
Ext.getCmp('panel').update(response);
},

response is html code that is being echoed out by php on server side.

Can anyone help me?

Zanisimo
7 Jan 2011, 12:37 AM
Ok. I found out that i can do this:

var div = new Ext.BoxComponent({autoEl: {tag: 'div', html: 'HELLO'}});
Ext.getCmp('panel').add(div);
Ext.getCmp('panel').doLayout();

And it shows correctly. The problem is that in the server side I echo out a lot of HTML code and i don`t want to create a Ext object for each of my HTML elements. Is it possible to do this any other way?

rkaat
7 Jan 2011, 12:50 AM
You have to decode the response from the server first before you can use it.

Try this:


success: function(result, request) {
var json = Ext.util.JSON.decode(result.responseText); // Decode JSON
Ext.getCmp('panel').body.update(json.property); // Replace 'property' with the property that contains the html you want add
},

Zanisimo
7 Jan 2011, 12:52 AM
I solved the problem my self. The code:

success: function(response) {
Ext.getCmp('panel').body.update(response.responseText);
},

Zanisimo
7 Jan 2011, 12:57 AM
Thanks for your help. I didn't need to json decode the response because i it wasn't encoded in json. response in my case contains HTML text.

Condor
7 Jan 2011, 1:29 AM
In that case you could also have used:

Ext.getCmp('panel').load({url: 'myurl'});

mitchellsimoens
7 Jan 2011, 6:28 AM
Since you are a beginner, try not to use static IDs unless you are just testing something. It is better practice to not even use IDs. Just sayin....