1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Answers
    3
    Vote Rating
    1
    svizzini is on a distinguished road

      0  

    Default Answered: Multiple Lists in 1 Panel 'broken' since 2.1

    Answered: Multiple Lists in 1 Panel 'broken' since 2.1


    Hello!

    We have updated to ST 2.1 from 2.0.1 a couple days ago and now we have the problem that our lists have 0 height when there are more than 1 component in the parent panel besides the list.

    I have prepared 2 SenchaFiddles to demonstrate the problem, one with ST 2.0.1 and one with 2.1.

    ST 2.0.1: http://www.senchafiddle.com/#rlf2M

    ST 2.1: http://new.senchafiddle.com/#/jspXu/

    A
    s you can see. since 2.1 both lists have a height of 0. I already tried a million things to get this to work in the last 3 days to no avail. Also, giving the lists a fixed height is not an option.
    I suspect this has something to do with the new and improved list in 2.1 (which is great btw! The DOM is SO much smaller now with very large lists, this was the main reason we updated to 2.1)

    Any ideas how I could get this to work again in 2.1?

    A million thanks in advance.

  2. I finally found a way how to make it work.

    I extended the list to dynamically set the height of the list. First I simply tried records * itemHeight, but this does not work good enough if using grouping.

    I came up with this, and it seems to work so far. Please note that your list will need to have an id and itemCls, or you can adjust it to your needs in "fixHeight()"

    Code:
    Ext.define('MyApp.view.FixedList',{
        extend: 'Ext.dataview.List',
        alias: 'widget.fixedlist',
    
    
        config: {
            scrollable: { disabled: true }
        },
    
    
        setItemsCount: function()
        {
            this.callParent(arguments);
            this.fixHeight();
        },
    
    
        fixHeight: function()
        {
            // get the DOM elements for our items
            // selecting by id and itemCls because we could have multiple lists with the same itemCls
            var domItems = Ext.query('#' + this.getId() + ' .' + this.getItemCls());
            var newHeight = 0;
    
    
            Ext.Array.each(domItems, function(item, index)
            {
                var el = Ext.fly(item);
    
    
                // items that are not visible have this CSS style: -webkit-transform: translate3d(0px, -10000px, 0px);
                // so if the current item has this style we can break here
                if(el.getAttribute('style').indexOf('-10000px') >= 0)
                    return false;
    
    
                newHeight += el.getHeight();
            });
    
    
            if(newHeight == 0)
                this.setHeight('auto');
            else
                this.setHeight(newHeight);
        }
    });
    And here is a working Sencha Fiddle: http://new.senchafiddle.com/#/Eub4e/

    N
    ot the best solution but I hope the Sencha Team will make the infinite scrolling of the list an optional option in the future.

  3. #2
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Answers
    3
    Vote Rating
    1
    svizzini is on a distinguished road

      0  

    Default


    Desperate bump since this got only 6 views (of which 3 were from me )

  4. #3
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Answers
    3
    Vote Rating
    1
    svizzini is on a distinguished road

      0  

    Default


    I finally found a way how to make it work.

    I extended the list to dynamically set the height of the list. First I simply tried records * itemHeight, but this does not work good enough if using grouping.

    I came up with this, and it seems to work so far. Please note that your list will need to have an id and itemCls, or you can adjust it to your needs in "fixHeight()"

    Code:
    Ext.define('MyApp.view.FixedList',{
        extend: 'Ext.dataview.List',
        alias: 'widget.fixedlist',
    
    
        config: {
            scrollable: { disabled: true }
        },
    
    
        setItemsCount: function()
        {
            this.callParent(arguments);
            this.fixHeight();
        },
    
    
        fixHeight: function()
        {
            // get the DOM elements for our items
            // selecting by id and itemCls because we could have multiple lists with the same itemCls
            var domItems = Ext.query('#' + this.getId() + ' .' + this.getItemCls());
            var newHeight = 0;
    
    
            Ext.Array.each(domItems, function(item, index)
            {
                var el = Ext.fly(item);
    
    
                // items that are not visible have this CSS style: -webkit-transform: translate3d(0px, -10000px, 0px);
                // so if the current item has this style we can break here
                if(el.getAttribute('style').indexOf('-10000px') >= 0)
                    return false;
    
    
                newHeight += el.getHeight();
            });
    
    
            if(newHeight == 0)
                this.setHeight('auto');
            else
                this.setHeight(newHeight);
        }
    });
    And here is a working Sencha Fiddle: http://new.senchafiddle.com/#/Eub4e/

    N
    ot the best solution but I hope the Sencha Team will make the infinite scrolling of the list an optional option in the future.

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