Results 1 to 10 of 10

Thread: [FIXED][3.0.0 SVN] List View Column Alignment issues

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default [TENT][3.0.0 SVN] List View Column Alignment issues

    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\[bug descr]\ so you may have to do a quick replace for "../../ to be "../
    Code:
        <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>
    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.
    Code:
    var sw = w - (Ext.isDefined(this.scrollOffset) ? this.scrollOffset : Ext.getScrollBarWidth());
    Attached Images Attached Images
    Last edited by JoeAtTrends; 31 Jul 2009 at 2:04 PM. Reason: I can't spell

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Fixed in SVN, thanks.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    wouldn't it be easier to simply do
    Code:
    var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
    Ext.num() was born to do stuff like that

  4. #4

    Default

    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.

  5. #5

    Default No scrollbar at all

    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
    Attached Images Attached Images

  6. #6

    Default no scrolbar in listview

    adding
    .x-list-body
    {
    height: 200px;
    do the trick but it seems to me not intended behaviour

  7. #7
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    Quote Originally Posted by Taco View Post
    ... ... ... I use the same code with ext-js 3.0.0
    what code would that be, pray tell?

  8. #8

    Default

    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, 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.
    Last edited by JoeAtTrends; 13 Aug 2009 at 8:06 PM. Reason: Added Information on the next patch, ammended some previous statements

  9. #9

    Default premium

    thanks you all for your reply. I think I better become a "premium"

  10. #10
    Ext User
    Join Date
    Sep 2009
    Posts
    55

    Default

    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?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •