PDA

View Full Version : Mysterous rendering problems



vaduros
25 Apr 2007, 8:07 AM
Hi all,

I'm running into two rendering issues with my paging grid application. It is more or less modeled after the standard paging grid example except that the datasource is updated from a menu click. The other difference is that the content of one of the columns are small images.

When the grid is rendered, most of the time there is no scrollbar, even if the grid height exceeds the container height. Sometimes the scrollbar is shown, especially when I click the 'move to first page' button on the paging toolbar. The behaviour of the grid in respect to scrollbar rendering is not predictable.

A similar problem arises when I try to use a dialog to show an enlarged version of the image if the user clickes the corresponding thumbnail cell in the grid. This is my function to render the dialog:


function showDialog(value){
if(!dialog){
dialog = new Ext.BasicDialog("nbig-dlg", {
modal:true,
shadow:true,
width: 350,
height: 280,
collapsible: false,
resizable: false,
});
}
dialog.body.update('<img src=\"/noten/' + value +'.jpg\" id=\"notes-img\"/>');
zim = Ext.get("notes-img");
sx = zim.getWidth()+3;
sy = zim.getHeight()+3;
dialog.setContentSize(sx, sy);
dialog.show();
}


What should happen is that the dialog div body is updated with the image and the dialog itself is enlarged to the images dimensions. What happens actually is that in 9 of ten clicks the dialog is rendered with minimal dimensions (4 to 3 pixels) on the first click. Clicking again yields the intended result.

What's making things even more interesting is that under firebug control not only sx and sy are calculated correctly on the first click but also the dialog is rendered with the right dimensions (just to mention it: the incorrect rendering happens under IE6 as well).

It makes no difference whether I frist show the dialog and update/resize it afterwards or vice versa.

Is this a problem with the grid/dialog layout updater? Any hints or workarounds or debugging tips?

If needed I could post relevant sceeenshots.

vaduros
26 Apr 2007, 10:22 AM
Sorry for replying to my own post but is there nobody to give some hints? Not even TyranDLS?

Please don't force me to post a bug report...>:)...

tryanDLS
26 Apr 2007, 11:16 AM
1. Is the grid in a gridPanel? Does your image column have a height? Are they different sizes per row? If so this could be a problem - I don't think the grid supports varying height rows yet.
Can you post a small sample/link?


2. Since your img tag doesn't have sizes, the browser won't know what the size is until the image is completely loaded. It's possible that given browser lag, the load isn't complete before you try to get the width and height - you could try delaying those calls to let the image load completely. Also, you may be further complicating things by always pushing html into the body with and id - this may be confusing the dom. Might try just setting the src each time on an existing img element (just guessing here - not sure that works x-browser).

3. Posting it as a bug isn't going to get you an answer any faster. People have to understand what you're really doing before trying to help - and so far there's not enough info.

Animal
26 Apr 2007, 11:45 AM
try



function showDialog(value){
if(!dialog){
dialog = new Ext.BasicDialog("nbig-dlg", {
modal:true,
shadow:true,
width: 350,
height: 280,
collapsible: false,
resizable: false,
});
}
dialog.body.update('');
dialog.body.update('<img src="/noten/' + value +'.jpg" id="notes-img"/>');
YAHOO.util.Dom.onAvailable("notes-img", function() {
zim = Ext.get("notes-img");
sx = zim.getWidth()+3;
sy = zim.getHeight()+3;
dialog.setContentSize(sx, sy);
dialog.show();
});
}

vaduros
26 Apr 2007, 3:02 PM
@Animal,

that results in

YAHOO.util.Dom.onAvailable is not a function

Namespace problem?

@Tim:

The grid is not within a gridpanel. The images are of different sizes (not much delta, but there is), so there is no chance to set a default row height.

The rendering code for the column is quite simple:



function renderNPreview(value){
return '<img src=\"/vorschau/v_' + value +'.jpg\" />';
}


Below I've attached some screenshots which might shed some light on the issue. Number two shows the right scrollbar rendering after I've clicked the paging controls back and forth.

tryanDLS
26 Apr 2007, 5:00 PM
I think it's YAHOO.util.Event.onAvailable.

Try putting a height and width on the img tag that you render. Make it big enough to contain the largest image in the grid. This may mean not look pretty in the short term, but it will determine whether it's the cause of your scrollbar not appearing consistently. You might have to look at the css applied to the rows to see if you should increase the row height - not sure which entry it is, you'll have to examine the HTML via Firebug

vaduros
30 Apr 2007, 5:42 AM
Tim and Animal,

you're really helpful. I solved the scrolling problem by setting the height for the container.

But the dialog problem still persists. I can avoid it by setting width and height explicitely, but as size differs for the images in reality , I'm getting rendering distortions.

Attached you can see some output of a firebug session where the rendering fails on the first click. Interestingly the dom apparently knows the right dimensions for the image, only the container is set too small (2 by 3 pixels).

tryanDLS
30 Apr 2007, 7:01 AM
Did you try setting a BP in the onAvailable handler? Is it not getting the correct image dimensions?

vaduros
1 May 2007, 11:12 AM
This is where the fun starts. It seems to be a weird timing problem. If I set the breakpoint to


zim = Ext.get("notes-img");

and step through the function everything is OK, sx and sy are set correctly.

If I remove the BP and set it to


dialog.setContentSize(sx, sy);

instead, sy and sy are set to their min values 2 px, so it is clear that zim.getWidth() hasn't worked.

Given that it seems that the onAvailable handler fires before the object actually is available. Is this a bug within the Yahoo utilities?

tryanDLS
1 May 2007, 11:48 AM
From reading the YUI code, it looks like that fires when the ID is assigned, which may be too soon. There's another event onContentReady that looks to fire a little later - give that a try.

vaduros
1 May 2007, 2:21 PM
Tim,

that doesn't work reliably either. Is there a debugging version of the yui-utilities or do you have another idea how to gather more information or circumvent the problem?

tryanDLS
1 May 2007, 4:31 PM
You could post on the YUI forum and see if anyone has any insight into the timing of those events.