1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    shikhirsingh is on a distinguished road

      0  

    Default Unanswered: Why is my Ext.List not visible? Sencha Bug?

    Unanswered: Why is my Ext.List not visible? Sencha Bug?


    I have a List that is not visible unless I set it's height values in pixels. The problem is that I don't know the size of the list so I don't know how to set the height.

    Structure of my code:
    I have a Parent container which contains two child containers. The second child container contains an Ext.List which is not scrollable(since I want the Parent container to scroll but not the child container or the List).

    Code:
    Ext.define('MyApp.view.ApplicationContainer', {
        extend: 'Ext.Container',
    
    
        config: {
            fullscreen: true,
            id: 'ApplicationContainer',
            layout: {
                type: 'fit'
            },
            items: [
                {
                    xtype: 'container',
                    id: 'ParentContainer',
                    style: 'background-color: yellow',
                    layout: {
                        type: 'vbox'
                    },
                    scrollable: 'vertical',
                    items: [
                        {
                            xtype: 'container',
                            height: 200, // this value has to be fixed in pixels to ensure no
                                               // bizarre whitespace and scrolling issues
                            id: 'ChildContainer1Desc',
                            style: 'background-color: red',
                            scrollable: false,
                            items: [
                                {
                                    xtype: 'label',
                                    html: 'This container must scroll without excess whitespace with with ChildContainer2 so they can\'t each be flex properties. List is set to not scrollable to ensure it scroll with this container and not separately'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'ChildContainer2List',
                            style: 'background-color: green; margin: 10px;',
                            layout: {
                                type: 'vbox' // I've tried 'fit' here but doesn't work.
                                                   // My guess is that since the top container has height in pixels, 
                                                  // I can't have 'fit' here
                            },
                            scrollable: false,
                            items: [
                                {
                                    xtype: 'list',
                                    flex: 1, // suggestion found in other forums, but doesn't work :(
                                    ui: 'round',
                                    scrollable: false,  // I think this needs to be false to ensure it scrolls togther
                                                               // with it's parent container
                                    itemTpl: [
                                        '{id}'
                                    ],
                                    store: 'MyJsonPStore'
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    
    
    });
    I've zipped up my code here so that it can easily be tested and i posted it here:http://www.shikhir.com/temp/ListWillNotDisplay.zip
    Last edited by shikhirsingh; 6 Nov 2013 at 7:57 AM. Reason: more info

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    10
    Vote Rating
    0
    happy7 is on a distinguished road

      0  

    Default


    try to add "flex" param to your child containers (since they are in vbox container)

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    shikhirsingh is on a distinguished road

      0  

    Default


    Unfortunately it is not possible to use flex in both child containers because they don't create a consistent experience on all devices. In particular, there are whitespace and scrolling issues.

    To fix this, I had to set a fixed width value in pixels for the first child container so that the white-spacing is correct. Now how do I get the second child container to auto grow? Setting the height to "auto" for the second child container does not work.

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    10
    Vote Rating
    0
    happy7 is on a distinguished road

      0  

    Default


    as I know form my experience, list will not auto grow, especially in vbox container.. try to specify height for the list

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    shikhirsingh is on a distinguished road

      0  

    Default


    Quote Originally Posted by happy7 View Post
    as I know form my experience, list will not auto grow, especially in vbox container.. try to specify height for the list
    You are actually correct, that does work but it's not possible to know the height of the list. As such all my lists are cut off or are way too long.

  6. #6
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,981
    Vote Rating
    132
    Answers
    336
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    You could try calculating and setting your list height in the list's initialize listener.
    List height should be approximately the # of items in your store times the itemHeight. Give or take a few px.

    http://docs.sencha.com/touch/2.3.0/#...ent-initialize
    http://docs.sencha.com/touch/2.3.0/#...cfg-itemHeight

    You may want to consider trying to reduce the over nesting in your view. The container with id ParentContainer seems redundant you should just make your ApplicationContainer use vbox. Also a list is already a container no need to add it to another container. Over nesting can lead to unexpected layout behavior. You should also use itemId rather than id on your components.

    http://docs.sencha.com/touch/2.3.0/#...ent-cfg-itemId
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  7. #7
    Sencha User shikhir's Avatar
    Join Date
    May 2011
    Location
    Los Angeles, California
    Posts
    14
    Vote Rating
    0
    shikhir is on a distinguished road

      0  

    Default


    Quote Originally Posted by fmoseley View Post
    You could try calculating and setting your list height in the list's initialize listener.
    List height should be approximately the # of items in your store times the itemHeight. Give or take a few px.

    http://docs.sencha.com/touch/2.3.0/#...ent-initialize
    http://docs.sencha.com/touch/2.3.0/#...cfg-itemHeight

    You may want to consider trying to reduce the over nesting in your view. The container with id ParentContainer seems redundant you should just make your ApplicationContainer use vbox. Also a list is already a container no need to add it to another container. Over nesting can lead to unexpected layout behavior. You should also use itemId rather than id on your components.

    http://docs.sencha.com/touch/2.3.0/#...ent-cfg-itemId
    The recommended solution above of calculating the pixel size of the list did work, but I still do view this as a bug. If I set the list's parent Container to "auto", Sencha Touch should calculate this for me. It's not intuitive to figure out that I need to set the height by calculating the pixel size of the List.

    Anyone at Sencha Agree?

  8. #8
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    115
    Vote Rating
    0
    Answers
    2
    =NR= has a little shameless behaviour in the past

      0  

    Default


    Quote Originally Posted by shikhir View Post
    The recommended solution above of calculating the pixel size of the list did work, but I still do view this as a bug. If I set the list's parent Container to "auto", Sencha Touch should calculate this for me. It's not intuitive to figure out that I need to set the height by calculating the pixel size of the List.

    Anyone at Sencha Agree?
    it's been years and this thing still happen and with no hope of sencha's guys will do anything about it..

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    77
    Vote Rating
    1
    Answers
    6
    kidqn is on a distinguished road

      0  

    Default


    Hey, I have ever faced a similar problem, it is not bug of sencha, it it problem in HTML and CSS.

    Consider that we have a div. If we want to show it, it has to inherit available height from its parent. If you want parent auto increase its length, you have to set its position is relative, otherwise position is absolute, child div which overflowed will disappear.

    When I debug by web inspector, I see many divs have absolute positions and overflow:hidden. If you want to try to solve, you can uncheck absolute position of them or insert some propeties overflow auto, overflow scroll.

    The hack solution is set heigth of parent is : 1000 or 10000px,

    or you can refer a glossary: sticky footer http://css-tricks.com/snippets/css/sticky-footer/