I'm having a problem that seems like it should be very simple to address, but I can't seem to find a solution.
I have a Viewport and for the north region I have a simple Panel. On this panel I set autoLoad to a URL that pulls in some very simple HTML to display. I also have autoHeight set to true on the Panel so that it will size itself appropriately.
When the page is first loaded, everything displays well except that the north region Panel has not sized itself correctly. If I resize the browser, the page repaints and the north Panel is the correct size.
Any suggestions for what I can do to get the panel to size appropriately on the inital page render. I have tried numerous different things including a callback function on the autoLoad, event listeners, etc., but I can't figure out how to get it to work.
The Visual LISP Developers Bible 2003 Edition (v2)::
File Format: PDF/Adobe AcrobatWhile Auto/Visual LISP lacks many of the modern ammenities such as dialog This doesn’t really affect Visual LISP. since it works from within AutoCAD
http://www.midpointcad.com/au/docs/lakose_The_Visual_LISP_Developers_Bible.pdfHOME |
Here is the javascript:
Ext.BLANK_IMAGE_URL = webContextRoot + '/images/ext/resources/images/default/s.gif'; // Ext 2.0
function autoSiteMain() {
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout:'border',
items:[
northPanel,
{
region:'west',
id:'west-panel',
title:'Navigation',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 10 5',
},
new Ext.Panel({
region:'center',
deferredRender:false,
margins:'0 5 10 0',
tbar:
[{
id: 'testButton',
text:'Button',
iconCls: 'folder',
tooltip: 'Button',
handler: function()
{
viewport.doLayout();
},
scope:this
}]
})
]
});
});
}
var northPanel = new Ext.Panel({
region:'north',
contentEl: 'north',
deferredRender:false,
margins:'5 5 5 5',
autoHeight: true,
autoLoad:
{
url: webContextRoot + 'Header.html',
text: 'Loading Header Content...'}
});
Is there any way to trigger a viewport.doLayout() after the autoLoad completes?
Hmm. I wonder.
Let's read the docs on autoLoad shall we?
I dont really see anything specifically wrong, but it does seem rather odd to have onReady be inside a function, normally it would be the other way around. It is also possible that having the north panel be created outside of the onReady is contributing to the problem.
The callback expects a function reference, in the first one you have passed the result of doLayout (which is probably void) to the callback.
Dear Emacs, please make this -*-Text-*- mode ::
vpTree() to allow creation of viewport "bundles" that may be pushed at once This caused some trouble with panel.superpose (PR#974). o methods() could
http://cran.md.tsukuba.ac.jp/bin/windows/base/old/1.9.1/NEWS.rw1091HOME |
• F::
File Format: PDF/Adobe Acrobat - View as HTMLlines). * coordinates of the center of the map. * map scroll mode (scroll bars, auto scroll, drag. scroll, home, go to, resize)
http://handle.dtic.mil/100.2/ADA286259HOME |
How can it now a height when it renders? northPanel is an empty Panel. It is zero height.
Several milliseconds later some innerHTML is thrown into it from an Ajax request. So what? The Panel is already sized.
Why did the alert() call work?
Is there a reason you are providing both a contentEl and autoLoad? Is 'Header.html' an html fragment or a fully formed html document?
Hmm. I wonder.
Let's read the docs on autoLoad shall we?Hmm.
I stated in the original post that I had tried using the callback function on autoLoad and it hadn't worked. But thanks for the useless, condescending remark.
In an effort to actually be helpful, I'll share my findings...
My troubles were caused by the formatting required when specifying the callback. When specifying the autoLoad, I could get an alert to fire using a callback like this:
autoLoad:
{
url: webContextRoot + 'Header.html',
text: 'Loading Header Content...',
callback: alert('Callback on autoload')
}
Then, I tried to replace the alert with a direct call to the viewport.doLayout(), like this:
autoLoad:
{
url: webContextRoot + 'Header.html',
text: 'Loading Header Content...',
callback: viewport.doLayout()
}
But this would throw a javascript error saying "viewport is undefined".
I was able to get things working smoothly by wrapping the viewport.doLayout() call within an explicit function definition for the callback, like this:
autoLoad:
{
url: webContextRoot + 'Header.html',
text: 'Loading Header Content...',
callback: function(){ viewport.doLayout(); }
}
I still don't completely understand why the one works and the other doesn't, but apparently defining the explicit function for the callback definition gets the correct scopes lined up.
Sorry, I missed the lack of a height config option in the north panel. The fix is to provide one. You are correct that the code has no way to know what size the content will be, so YOU have to tell it, or wait until it is available. The Ext.updater that autoUpdate configures works on the Panel's body element. If you need finer control over the updater than just giving it a url (attaching a callback function comes to mind in this case), youre probably better off calling the update() method on it yourself, or even retrieving the html fragment via ajax beforehand.
Animal,
I agree, you've summed up the issue very well, but what is the solution? The render occurs before the HTML is retrieved by the autoLoad, so it doesn't know what size to make the north Panel. Resizing the browser or manually calling viewport.doLayout() renders everything properly (like with the toolbar button in my code snippet).
Is there any way to trigger a viewport.doLayout() after the autoLoad completes? Or is there some other way to get the desired behavior?
Probably didn't, I'd say it would have fired before the call to the server was ever made.
The contentEl is a leftover from debugging / trial-and-error efforts, it really doesn't belong there. The HTML is just a fragment. Updated code for both below:
|
Big Header
|
|
Sub header
|
|
Item 1 = Item 3 = Item 3
|
|
|
|
|
Ext.BLANK_IMAGE_URL = webContextRoot + '/images/ext/resources/images/default/s.gif'; // Ext 2.0
function autoSiteMain() {
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var viewport = new Ext.Viewport({
layout:'border',
items:[
northPanel,
{
region:'west',
id:'west-panel',
title:'Navigation',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 10 5',
},
new Ext.Panel({
region:'center',
deferredRender:false,
margins:'0 5 10 0',
tbar:
[{
id: 'testButton',
text:'Button',
iconCls: 'folder',
tooltip: 'Button',
handler: function()
{
viewport.doLayout();
},
scope:this
}]
})
]
});
});
}
var northPanel = new Ext.Panel({
region:'north',
margins:'5 5 5 5',
autoHeight: true,
autoLoad:
{
url: webContextRoot + 'Header.html',
text: 'Loading Header Content...'}
});
Thanks Evan.
 Nortel Unveils Vision, Strategy for Israeli High-Performance Net
 Busy Friday Leads to Strong Close for Net Stocks |
