Results 1 to 5 of 5

Thread: List in container is not visible unless height is defined or switch to dataview

  1. #1

    Default Answered: List in container is not visible unless height is defined or switch to dataview

    I'm working on a screen that requires me to display multiple lists in a Panel. The scenario where we just need to show a single list and the layout for the container is set to 'fit' the list automatically takes up the available space.

    But in my case I want to display multiple lists having auto height depending on items. In this case I need to define some value to the height config option otherwise it will be zero and list won't be visible.

    I was able to tweak it to make it work by changing the xtype to 'dataview'

    I'm not sure what I'm missing here, but it should work with list.
    Note: The same code works well with Touch v2.0.0, not working from v 2.1.1 onwards.

    Check out my fiddle

    Code:
    Ext.create('Ext.Panel', {    
        fullscreen: true,    
        scrollable: true,
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: 'Menu',
            }, 
            {
                html: "List 1"
            },
            {           
                xtype: 'list',
                //xtype: 'dataview',
                height: 'auto',
                scrollable: null,
                style: 'background: #fff; padding: 5px 10px; margin: 10px; border-radius: 6px;',
                itemTpl: '{title}',
                data: [
                    { title: 'Item A' },
                    { title: 'Item B' },
                    { title: 'Item C' },
                    { title: 'Item D' }
                ]
            }, 
            {
                html: "List 2"
            },         
            {
                xtype: 'list',
                //xtype: 'dataview',
                height: 'auto',
                scrollable: null,                    
                style: 'background: #fff; padding: 5px 10px; margin: 10px; border-radius: 6px;',
                itemTpl: '{title}',
                data: [
                    { title: 'Item 1' },
                    { title: 'Item 2' },
                    { title: 'Item 3' },
                    { title: 'Item 4' }
                ]
            }
        ]
    });

  2. This works fine in Chrome. have you considered removing 'height auto' from the data view?

    Also, the preferred pattern is to use a data store rather than supplying data as a array to the view.

  3. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Answers
    102

    Default

    This works fine in Chrome. have you considered removing 'height auto' from the data view?

    Also, the preferred pattern is to use a data store rather than supplying data as a array to the view.

  4. #3
    Sencha User Kikketer's Avatar
    Join Date
    Apr 2012
    Location
    Wausau, WI
    Posts
    135
    Answers
    6

    Default

    Yep, I can confirm your defect (chrom 32). If you switch out the xtype from datalist to just list, the height: 'auto' fails.
    I've also heard that setting "null" to height may fix it (but I've not yet seen this work).

    I've had to explicitly set the height of my list based on the number of items in the list. Really annoying:
    Code:
    height = heightOfOneItem * data.length;
    Sencha... please buddy

  5. #4

    Default

    Thanks Jay, you are right, height auto is not required for dataview to be visible. It just needs scrollable to be null.

    Regarding the use of data store, I just used array for sample code, my actual work uses store.

    The problem I'm facing is related to upgrading my application from sencha touch 2.0.0 to sencha touch 2.3.1. The list that was visible in earlier version is now not visible after upgrade. I have modified the fiddle to demonstrate that; displaying 2 list of items, one using list and other using dataview. Take a look at my updated fiddle.

    Run Fiddle with Framework Sencha Touch 2.0.1.1: Both list and dataview are visible with height adjusted to show the items in store.
    Run Fiddle with Framework Sencha Touch 2.3.1: List is not visible while dataview is visible with height adjusted to show the items in store.

    My question is whether I'm missing anything from config options for list that is required in latest sencha touch version, or I'm left with no other option but to switch to using dataview instead of list.

    Thanks

  6. #5
    Sencha User =NR='s Avatar
    Join Date
    Mar 2013
    Location
    Singapore
    Posts
    115
    Answers
    2

    Default It is one of that hurdle with ST

    Quote Originally Posted by emad.suria View Post
    Thanks Jay, you are right, height auto is not required for dataview to be visible. It just needs scrollable to be null.

    Regarding the use of data store, I just used array for sample code, my actual work uses store.

    The problem I'm facing is related to upgrading my application from sencha touch 2.0.0 to sencha touch 2.3.1. The list that was visible in earlier version is now not visible after upgrade. I have modified the fiddle to demonstrate that; displaying 2 list of items, one using list and other using dataview. Take a look at my updated fiddle.

    Run Fiddle with Framework Sencha Touch 2.0.1.1: Both list and dataview are visible with height adjusted to show the items in store.
    Run Fiddle with Framework Sencha Touch 2.3.1: List is not visible while dataview is visible with height adjusted to show the items in store.

    My question is whether I'm missing anything from config options for list that is required in latest sencha touch version, or I'm left with no other option but to switch to using dataview instead of list.

    Thanks
    this is some known "hurdle" in ST,
    basically the list need a height to be rendered correctly.
    for those time that we don't know the exact height that we want and just want the list to expand as much as needed use "flex: 1" so it will fill the entire container (yup , "height: auto" is not really reliable).

    btw modified your code so it work:

    Code:
    Ext.application({
        name : 'List Sample',
        
        launch: function() {
    
    
            Ext.create('Ext.Panel', {
                fullscreen: true,
                layout: 'vbox',
                scrollable: 'vertical',
                items: [
                    {
                        xtype: 'titlebar',
                        docked: 'top',
                        title: 'Menu',
                    }, 
                    {
                        html: "Items using list"
                    },
                    {           
                        xtype: 'list',
                        flex: 1,
                        style: 'background: #fff; padding: 5px 10px; margin: 10px; border-radius: 6px;',
                        itemTpl: '{title}',
                        store: {
                            fields: ['title'],
                            data: [
                                { title: 'List Item A' },
                                { title: 'List Item B' },
                                { title: 'List Item C' },
                                { title: 'List Item D' }
                            ]    
                        }                    
                    }, 
                    {
                        html: "Items using data view"
                    },         
                    {
                        xtype: 'dataview',
                        scrollable: null,                    
                        style: 'background: #fff; padding: 5px 10px; margin: 10px; border-radius: 6px;',
                        itemTpl: '{title}',
                        store: {
                            fields: ['title'],
                            data: [
                                { title: 'Dataview Item 1' },
                                { title: 'Dataview Item 2' },
                                { title: 'Dataview Item 3' },
                                { title: 'Dataview Item 4' }
                            ]
                        }
                    }
                ]
            });          
        }    
    });

Tags for this Thread

Posting Permissions

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