You found a bug! We've classified it as TOUCH-3781 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #21
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    220
    Vote Rating
    8
    mike.estes will become famous soon enough

      1  

    Default


    Quote Originally Posted by Razr View Post
    So I think I figured out the problem here (was starting to pull my hairs out). Even with your snippet I can reproduce the problem over and over again. The rendering works when the image is loaded from cache, if not from the cache the rendering fails.

    Reproducing is quite easy, I would take your snippet (the one with 'variableHeights: true') and open this in Chrome. After hitting F5 a couple of times everything shows nicely. Now go into Chrome's options and clear all browser data/history/local storage and whatsoever. Refresh the page and tada!
    Sure enough, yes, once I cleared the cache I saw the problem again. Then that clued me into what is going on in this case. First, here is the same code with one minor change. If you run this, the problem should not reappear.

    Code:
    Ext.setup({
        onReady: function() {
            Ext.Viewport.add({
                xtype: 'container',
                layout: 'fit',
                items: [{
                    xtype: 'nestedlist',
                    store: {
                        fields: ['name', 'age'],
                        data: [
                            {name: 'Jamie',  age: 100},
                            {name: 'Rob',   age: 21},
                            {name: 'Tommy', age: 24},
                            {name: 'Jacky', age: 24},
                            {name: 'Ed',   age: 26}
                        ]
                    },
                    listConfig: {   
                        variableHeights: true, 
                        itemTpl: new Ext.XTemplate(
                            '<table style="width:100%;">',
                                '<tr>',
                                    '<td style="width:15%">',
                                        '<img width="164px" height="164px" src="http://www.sencha.com/files/blog/old/blog/wp-content/uploads/2010/06/sencha-logo.png" />',
                                    '</td>',
                                    '<td style="width:60%">',
                                        '{name}',
                                    '</td>',
                                    '<td style="width:25%">',
                                        '{age}',
                                    '</td>',
                                '</tr>',
                            '</table>'
                        )
                    }
                }]
            });
        }
    });
    Notice the only difference is that I have explicitly set the size of the image. You figuring out the image cache side of the issue helped me figure out this bit. What I think is happening is that when the items are being drawn on screen the image data hasn't yet loaded so the eventual size that the image will take up is not yet known (loading from cache is so much faster that this seems to not be an issue when that is the case). Therefore only the text itself influences the list item size at that point. Adding an explicit size seems to work around the issue because the image element will already be sized accordingly.

    I say that bit a little guardedly because to be honest I don't really understand why the list item element doesn't just increase in height as needed once the image does load. Also, since in this example code I am setting the image size the same for all the list items I expected that I could keep variableHeights set to the default of false. However, oddly enough that turned out not to be true and variableHeights is still needed for some reason that I don't yet understand. It probably has some explanation that will make sense once I am a little less tired I'll run that by the devs for their thoughts tomorrow. Meanwhile, give that code a try and let me know if you come across any further problems.

  2. #22
    Sencha User
    Join Date
    Jul 2012
    Posts
    23
    Vote Rating
    6
    Razr is on a distinguished road

      0  

    Default


    It is correct that setting a fixes height and width does solve problem. But then the whole point of using relative values in my template is gone. I want to provide a scalable template so the user has smaller or larger images depending on their resolution.

    For a workaround this might suffice, or perhaps a jQuery reload/recalculate script for the list items would do better for the time being. Anyway I would really appreciate if one of the devs could look into this because with 2.0.1.* it does work. Thanks for your effort so far.

  3. #23
    Sencha - Support Team mike.estes's Avatar
    Join Date
    Mar 2011
    Location
    Redwood City, CA
    Posts
    220
    Vote Rating
    8
    mike.estes will become famous soon enough

      0  

    Default


    I'm going to go ahead and push this into our internal tracker as I do agree that there is a bug here. Thanks for working on this issue with me, we will get it fixed up!

  4. #24
    Sencha User
    Join Date
    Jan 2012
    Posts
    4
    Vote Rating
    3
    jdrowell is on a distinguished road

      0  

    Default


    Thanks for your suggestions Mike.

    I can confirm that setting the width and height for the images works with my regular List. Previously we were only setting the width to allow for auto-scaling the height, but we can live with a fixed height in this project. Tested this workaround in Chrome (Chromium 22.0.1229.94), with images in cache and with forced refresh, and on an iPad 2 with iOS 6.01.

    Please note that setting variableHeights to false re-introduces the bug, even when setting the image height and width in CSS. It seems that the main culprit is at line 828 of List.js:

    if (info.variableHeights) { updatedItems.push(item);
    }

    Putting and "if (true)" there renders correctly when variableHeights is false (which is semi-obvious, there are lots of other ifs related to variableHeights). It should probably me something more specific, like "if (info.variableHeights || height != defaultHeight)" (metacode).

  5. #25
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    698
    Vote Rating
    40
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    just stumbled across this one here: http://docs.sencha.com/touch/2-1/#!/guide/first_app
    Check out the first sample, the second (Blog) tab, in LivePreview and you will see the problem in the shown list.

  6. #26
    Sencha Premium Member akpotosufredrick's Avatar
    Join Date
    Jan 2011
    Posts
    68
    Vote Rating
    0
    akpotosufredrick is on a distinguished road

      0  

    Default


    has anyone tried just using itemTpl withouth the listConfig? that should work.

  7. #27
    Sencha User
    Join Date
    Feb 2013
    Posts
    12
    Vote Rating
    0
    fariazz is on a distinguished road

      0  

    Default


    I'm loading data from the web and population a list, and I'm running into this same bug, where the list elements seem to overlap each other every now and then.

    I tried setting variableHeights to true, but the elemtents still overlap.

    The div inside itemTpl doesn't have a height because this should vary according to the content (no images, just text).

    From what I've read there is no fix or hack so far that works except when having fixed height images.

    Any suggestions how I could get this working properly?

    my code:

    <code>
    Ext.define('Lyd.view.News', {
    extend: 'Ext.navigation.View',
    xtype: 'newsPage',
    requires: [
    'Ext.dataview.List',
    'Lyd.store.NewsItems',
    'Lyd.view.NewsDetail',
    'Ext.plugin.ListPaging'
    ],

    config: {
    title: 'Noticias',
    iconCls: 'globe_black',
    layout : {
    type : 'card',
    animation : false
    },
    items: [{
    title: 'Noticias',
    xtype: 'list',
    variableHeights: true,
    itemTpl: '<div class="zva_list_item">{title}</div><div class="zva_list_date">{date}</div>',
    store: 'NewsItems',
    plugins: [{
    xclass: 'Ext.plugin.ListPaging',
    autoPaging: true,
    loadMoreText: 'Más entradas...',
    noMoreRecordsText: 'No hay más entradas'
    }],
    listeners: {
    itemtap: function(list, index, item, record) {
    this.up('newsPage').push({
    xtype: 'newsdetail',
    data: record.data,
    title: record.data.title
    });
    }
    }
    }]
    }
    });
    </code>

  8. #28
    Sencha User
    Join Date
    Jul 2012
    Posts
    23
    Vote Rating
    6
    Razr is on a distinguished road

      1  

    Default


    Quote Originally Posted by fariazz View Post
    I'm loading data from the web and population a list, and I'm running into this same bug, where the list elements seem to overlap each other every now and then.

    I tried setting variableHeights to true, but the elemtents still overlap.

    The div inside itemTpl doesn't have a height because this should vary according to the content (no images, just text).

    From what I've read there is no fix or hack so far that works except when having fixed height images.

    Any suggestions how I could get this working properly?
    No, as you can read on the top:
    • You found a bug! We've classified it as TOUCH-3781 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
    So for now we have to sit back, and wait till they have fixed it. It is too bad we do not have any possibility too see when that 'TOUCH-3781' task is scheduled but I guess we have to monitor the release notes.

    A kind of workaround is to explicitly set the height of every row.

  9. #29
    Sencha User
    Join Date
    Feb 2013
    Posts
    12
    Vote Rating
    0
    fariazz is on a distinguished road

      0  

    Default


    Quote Originally Posted by Razr View Post
    No, as you can read on the top:
    • You found a bug! We've classified it as TOUCH-3781 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
    So for now we have to sit back, and wait till they have fixed it. It is too bad we do not have any possibility too see when that 'TOUCH-3781' task is scheduled but I guess we have to monitor the release notes.

    A kind of workaround is to explicitly set the height of every row.
    Thanks I'll go with setting the height of every row.

  10. #30
    Sencha User
    Join Date
    Feb 2013
    Posts
    2
    Vote Rating
    0
    huangenyang@gmail.com is on a distinguished road

      0  

    Default Is this fixed yet? Waiting and waiting ....

    Is this fixed yet? Waiting and waiting ....


    Sencha Team?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar