PDA

View Full Version : Need help overwriting element content with grid panel



estring
19 Oct 2009, 10:44 AM
I'm rather new to ExtJS, but I'm quickly learning my way around. However, I've been having a problem trying to do something quite simple.

I have a <div> that contains a loading message that I want to replace with a grid panel after the grid is done getting data via an AJAX request.

Here's my layout:


Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:'border',
autoWidth: true,
items:[{
autoScroll:true,
region:'center',
padding: '0 0 0 0',
layout:'column',
items:[{
columnWidth:.5,
baseCls:'x-plain',
bodyStyle:'padding:5px 5px 5px 5px',
html: '<div id="notes-wrapper" class="mpage-container">Loading...</div><div id="medicalreconcilliation-wrapper" class="mpage-container">Loading...</div>'

},{
columnWidth:.47,
baseCls:'x-plain',
margins:'0 16px 0 0',
bodyStyle:'padding:5px',
html: '<div id="patienteducation-wrapper" class="mpage-container">Loading...</div><div id="followup-wrapper" class="mpage-container"></div>Loading...<div id="portaltabs-wrapper" class="mpage-container"></div>'

}]
}]
});
loadpageData();
});//end onReady
I am kicking off a bunch of ajax requests asynchronously inside the loadpageData() function. So I want to replace "Loading..." message with the results of my AJAX requests. For most requests, I'm building grid panels to insert into the DOM. I've tried the renderTo config in the grids to add the grid to the DOM, but that appends the grid to the div's innerHTML instead of overwriting content so I end up with a loading message followed by my grid instead of just the grid inside the <div> tags.

Any help would be greatly appreciated.

Mike Robinson
19 Oct 2009, 11:01 AM
Padewan... you want to use a "Viewport" object, and within that, to lay out everything else in your application using "layout: border" or somesuch.

Yes... the entire screen space is owned and controlled by a "viewport" object and within that, the various other parts of your application are in Panels.

Yes, I know that the examples spend much time with "renderTo" and all that ... but it is all but smoke. Here is the secret, most-painfully learned: "Layouts in a ViewPort."

estring
19 Oct 2009, 11:23 AM
Mike,

Thanks for the quick response, I'm not quite sure I understand what you are saying. I'm a using a viewport object defined using a layout type of border. I'm still in early development stages, so I've only defined the center portion of the layout thus far but I plan to add a north section for holding navigation components later on.

The other parts of my application built as Panels as you suggest (mostly usingExt.grid.GridPanel). The problem is some of the AJAX requests to get data for the grid panels take 2-10 seconds depending on the amount of data coming back. So I wanted to display a loading message and then replace it when the grid panel is ready.

I have the <div> tags with id's so I can insert the GridPanel's into specific areas on screen. Maybe I'm missing something, is there an example you can refer me to?