PDA

View Full Version : [FIXED][3.0.0 SVN] List View Column Alignment issues



JoeAtTrends
31 Jul 2009, 1:56 PM
Ext version tested:
Ext 3.0.0 rev 4951
Adapter used:
ext
css used:
only default ext-all.css


Browser versions tested against:
IE8
FF3 (firebug 1.4.1.00 installed)
Operating System:
WinXP Pro
Description:
in Firefox: When list view has a scroll bar it will miss align the columns.
in IE: alignment isn't harmed, but the scroll bar appears on the outer div not the inner body div... so there is a scroll bar next to the header. And there is an error:


Line: 36782
Char: 17
Error: Invalid argument

See screenshots for more details
Test Case:
The code below can be dropped into the examples folder, but I have it two folders deep, examples\Support\\ so you may have to do a quick replace for "../../ to be "../


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ListView Example</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../../ext-all-debug.js"></script>

<script type="text/javascript">

Ext.onReady(function(){

var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
store.loadData({"images":[{"name":"kids_hug2.jpg","size":2476,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug2.jpg"},{"name":"zack_hat.jpg","size":2323,"lastmod":1246921760000,"url":"images\/thumbs\/zack_hat.jpg"},{"name":"zack.jpg","size":2901,"lastmod":1246921760000,"url":"images\/thumbs\/zack.jpg"},{"name":"zack_sink.jpg","size":2303,"lastmod":1246921760000,"url":"images\/thumbs\/zack_sink.jpg"},{"name":"sara_pink.jpg","size":2154,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pink.jpg"},{"name":"dance_fever.jpg","size":2067,"lastmod":1246921760000,"url":"images\/thumbs\/dance_fever.jpg"},{"name":"gangster_zack.jpg","size":2115,"lastmod":1246921760000,"url":"images\/thumbs\/gangster_zack.jpg"},{"name":"zacks_grill.jpg","size":2825,"lastmod":1246921760000,"url":"images\/thumbs\/zacks_grill.jpg"},{"name":"kids_hug.jpg","size":2477,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug.jpg"},{"name":"zack_dress.jpg","size":2645,"lastmod":1246921760000,"url":"images\/thumbs\/zack_dress.jpg"},{"name":"sara_pumpkin.jpg","size":2588,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pumpkin.jpg"},{"name":"sara_smile.jpg","size":2410,"lastmod":1246921760000,"url":"images\/thumbs\/sara_smile.jpg"},{"name":"up_to_something.jpg","size":2120,"lastmod":1246921760000,"url":"images\/thumbs\/up_to_something.jpg"},{"name":"kids_hug2.jpg","size":2476,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug2.jpg"},{"name":"zack_hat.jpg","size":2323,"lastmod":1246921760000,"url":"images\/thumbs\/zack_hat.jpg"},{"name":"zack.jpg","size":2901,"lastmod":1246921760000,"url":"images\/thumbs\/zack.jpg"},{"name":"zack_sink.jpg","size":2303,"lastmod":1246921760000,"url":"images\/thumbs\/zack_sink.jpg"},{"name":"sara_pink.jpg","size":2154,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pink.jpg"},{"name":"dance_fever.jpg","size":2067,"lastmod":1246921760000,"url":"images\/thumbs\/dance_fever.jpg"},{"name":"gangster_zack.jpg","size":2115,"lastmod":1246921760000,"url":"images\/thumbs\/gangster_zack.jpg"},{"name":"zacks_grill.jpg","size":2825,"lastmod":1246921760000,"url":"images\/thumbs\/zacks_grill.jpg"},{"name":"kids_hug.jpg","size":2477,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug.jpg"},{"name":"zack_dress.jpg","size":2645,"lastmod":1246921760000,"url":"images\/thumbs\/zack_dress.jpg"},{"name":"sara_pumpkin.jpg","size":2588,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pumpkin.jpg"},{"name":"sara_smile.jpg","size":2410,"lastmod":1246921760000,"url":"images\/thumbs\/sara_smile.jpg"},{"name":"up_to_something.jpg","size":2120,"lastmod":1246921760000,"url":"images\/thumbs\/up_to_something.jpg"},{"name":"kids_hug2.jpg","size":2476,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug2.jpg"},{"name":"zack_hat.jpg","size":2323,"lastmod":1246921760000,"url":"images\/thumbs\/zack_hat.jpg"},{"name":"zack.jpg","size":2901,"lastmod":1246921760000,"url":"images\/thumbs\/zack.jpg"},{"name":"zack_sink.jpg","size":2303,"lastmod":1246921760000,"url":"images\/thumbs\/zack_sink.jpg"},{"name":"sara_pink.jpg","size":2154,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pink.jpg"},{"name":"dance_fever.jpg","size":2067,"lastmod":1246921760000,"url":"images\/thumbs\/dance_fever.jpg"},{"name":"gangster_zack.jpg","size":2115,"lastmod":1246921760000,"url":"images\/thumbs\/gangster_zack.jpg"},{"name":"zacks_grill.jpg","size":2825,"lastmod":1246921760000,"url":"images\/thumbs\/zacks_grill.jpg"},{"name":"kids_hug.jpg","size":2477,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug.jpg"},{"name":"zack_dress.jpg","size":2645,"lastmod":1246921760000,"url":"images\/thumbs\/zack_dress.jpg"},{"name":"sara_pumpkin.jpg","size":2588,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pumpkin.jpg"},{"name":"sara_smile.jpg","size":2410,"lastmod":1246921760000,"url":"images\/thumbs\/sara_smile.jpg"},{"name":"up_to_something.jpg","size":2120,"lastmod":1246921760000,"url":"images\/thumbs\/up_to_something.jpg"},{"name":"kids_hug2.jpg","size":2476,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug2.jpg"},{"name":"zack_hat.jpg","size":2323,"lastmod":1246921760000,"url":"images\/thumbs\/zack_hat.jpg"},{"name":"zack.jpg","size":2901,"lastmod":1246921760000,"url":"images\/thumbs\/zack.jpg"},{"name":"zack_sink.jpg","size":2303,"lastmod":1246921760000,"url":"images\/thumbs\/zack_sink.jpg"},{"name":"sara_pink.jpg","size":2154,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pink.jpg"},{"name":"dance_fever.jpg","size":2067,"lastmod":1246921760000,"url":"images\/thumbs\/dance_fever.jpg"},{"name":"gangster_zack.jpg","size":2115,"lastmod":1246921760000,"url":"images\/thumbs\/gangster_zack.jpg"},{"name":"zacks_grill.jpg","size":2825,"lastmod":1246921760000,"url":"images\/thumbs\/zacks_grill.jpg"},{"name":"kids_hug.jpg","size":2477,"lastmod":1246921760000,"url":"images\/thumbs\/kids_hug.jpg"},{"name":"zack_dress.jpg","size":2645,"lastmod":1246921760000,"url":"images\/thumbs\/zack_dress.jpg"},{"name":"sara_pumpkin.jpg","size":2588,"lastmod":1246921760000,"url":"images\/thumbs\/sara_pumpkin.jpg"},{"name":"sara_smile.jpg","size":2410,"lastmod":1246921760000,"url":"images\/thumbs\/sara_smile.jpg"},{"name":"up_to_something.jpg","size":2120,"lastmod":1246921760000,"url":"images\/thumbs\/up_to_something.jpg"}]});


var listView = new Ext.ListView({
store: store,
multiSelect: true,
emptyText: 'No images to display',
reserveScrollOffset: true,

columns: [{
header: 'File',
width: .5,
dataIndex: 'name'
},{
header: 'Last Modified',
width: .35,
dataIndex: 'lastmod',
tpl: '{lastmod:date("m-d h:i a")}'
},{
header: 'Size',
dataIndex: 'size',
tpl: '{size:fileSize}',
align: 'right'
}]
});

// put it in a Panel so it looks pretty
var panel = new Ext.Panel({
id:'images-view',
width:425,
height:250,
collapsible:true,
layout:'fit',
title:'Simple ListView <i>(0 items selected)</i>',
items: listView
});
panel.render(document.body);

// little bit of feedback
listView.on('selectionchange', function(view, nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple ListView <i>('+l+' item'+s+' selected)</i>');
});
});

</script>
<link rel="stylesheet" type="text/css" href="list-view.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../../shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../../shared/examples.js"></script><!-- EXAMPLES -->

<h1>ListView Example</h1>

</body>
</html>


[B]Steps to reproduce the problem:
Create a list view which has data long enough to warrant a scroll bar.
The result that was expected:
Columns would line up
The result that occurs instead:
Everything is slightly off by the width of the scroll bar
Screenshot or Video:
attached
Debugging already done:
none
Possible fix:
There seems to be a syntax/typo error in the List view's onResize method. The sw variable is being set to undefined according to FireBug when it should be assigned a number.
Here is a proposed fix, enclosing the ternary operation in parens fixed it for me.
var sw = w - (Ext.isDefined(this.scrollOffset) ? this.scrollOffset : Ext.getScrollBarWidth());

evant
31 Jul 2009, 5:06 PM
Fixed in SVN, thanks.

mystix
1 Aug 2009, 6:31 AM
wouldn't it be easier to simply do


var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());

Ext.num() was born to do stuff like that ;)

JoeAtTrends
1 Aug 2009, 9:47 AM
Not that I have too much say in the matter, but it appears that Ext.num could require more operations than isDefined. (probalby neglegable)

What it was doing before was evaluating w - Ext.isDefined(this.scrollOffset) as true or not... which if the width was greater than 1 px it would always be true, giving you this.scrollOffset as the entire width from then on. By grouping the ternary operation it ensure that the width is set to w - the outcome of the ternary operation.

But that is beyond me, as long as the columns work I will be happy. Thanks.:D

Taco
13 Aug 2009, 1:47 PM
Strange for me there is no scrolbar in firefox as well as in IE. I use the same code with ext-js 3.0.0

Taco
13 Aug 2009, 2:42 PM
adding
.x-list-body {
height: 200px;
do the trick but it seems to me not intended behaviour

mystix
13 Aug 2009, 7:05 PM
... ... ... I use the same code with ext-js 3.0.0

what code would that be, pray tell? :-?

JoeAtTrends
13 Aug 2009, 7:56 PM
I think that the problem is that you are using the public release 3.0.0 of ExtJs, This was a problem that was fixed in SVN, however hasn't been included in any patches that I am aware of. (looked it up, and you are looking at November for the first update I guess. I just checked the roadmap (http://extjs.com/products/extjs/roadmap.php), I thought they had monthly patches somewhere though [Sigh, I looked this up too, and it is only for support subscribers, I guess the SVN access or something, sorry])

Was there an override available for non Premiums?

Taco, you may have a better chance posting on a related thread, I myself haven't found too much on it, but I did start a thread in which Animal was able to provide help (for me it was pretty simple though) here it is http://extjs.com/forum/showthread.php?t=76258 Good luck, I am sure the fix you had done is very close to what made it into the SVN although I can't find the related bug post for that fix.

Taco
13 Aug 2009, 10:51 PM
thanks you all for your reply. I think I better become a "premium"

GregT
28 Oct 2009, 1:07 PM
I think I am having this problem (ListView disappearing scroll bar).

Can anyone clarify: does the patch build, eg. 3.0.3 as of today, include these fixes or do you have to wait for November?

Pulling individual fixes like this out of SVN sounds fraught with peril, no?