View Full Version : Updating panel content

31 Jan 2011, 10:36 AM
Using a charting application, I created a chart showing a years worth of information. The format of this chart is png. I then build a panel showing this chart using the html img tag. I also created an image onclick event which generates a new chart showing the quartly performance. The URL for the new chart is passed back and I get the URL using an Ext.Ajax.request function. To test, I am displaying a message box with the new URL. Everything is working great, however, how do I replace my original image in my panel with this new image updating what the user sees?

Thanks in advance,

31 Jan 2011, 12:59 PM
mike, are you using Ext JS or Sencha Touch?

31 Jan 2011, 1:07 PM
I am using ExtJS 3.1.1. I am working on an application for my utility customers generating reports and graphs from their historical data. I have already built pretty nice web site using Touch but it just gives year to date information (designed for the iPad). We are wanting this one to be more analytical, so I am wanting to provide several parameters, such as begin date, end date, cause, etc. Understanding how to update this is pretty critical to me. I have actually changed my web service to return the html img tag. It still doesn't show up in my panel but my message box has a nice graph in it! :)

BTW, I am enjoying the book, I picked it up this weekend.


31 Jan 2011, 1:09 PM
Hi Mike,

i'm going to move this to the Ext JS help section.

To fix your issue, try

yourPanelRef.body.update('<img src="' + yourImgUrl '" />');

31 Jan 2011, 1:09 PM
can't edit posts :(

yourPanelRef.body.update('<img src="' + yourImgUrl + '" />');

31 Jan 2011, 1:17 PM
That works perfectly! One other question, to generate the graph is fairly quick. However, I would like to display either loading message (I am adding a status bar) at the bottom. Would I put that in my onclick function when I click on the graph?