Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    4
    Stx.Greg is on a distinguished road

      2  

    Default [2.1.0 RC2] - Unscrollable List is Scrollable

    [2.1.0 RC2] - Unscrollable List is Scrollable


    REQUIRED INFORMATION

    Ext version tested:
    • Sencha Touch 2.1.0 RC2
    Browser versions tested against:
    • Safari 5.1.7 (7534.57.2) - Windows 7
    • Google Chrome 22.0.1229.94 m - Windows 7
    DOCTYPE tested against:
    • HTML
    Description:
    • Unscrollable list is scrollable and list height expands to fill all available space.
    • I think the same issue was reported here: http://www.sencha.com/forum/showthre...ays-scrollable, but a good test case / info was not provided.
    • In setting up the test case, I noticed the text field doesn't look right - not sure if that is a separate issue or if I'm missing a new config option in 2.1.0 RC2
    Steps to reproduce the problem:
    • Add a list to a vbox panel and set the list's 'scrollable' config option to false
    The result that was expected:
    • The list should not be scrollable and the list's height should be the height of all list items.
    The result that occurs instead:
    • The list is scrollable and the list takes up the remainder of the vbox panel.
    Test Case:
    Code:
    Ext.application({
        name: 'SenchaTest',
        launch: function () {
            Ext.define('TestModel', {
                extend: 'Ext.data.Model',
                config: {
                    fields: [
                        {name: 'field1'},
                        {name: 'field2'},
                        {name: 'field3'},
                    ]
                }
            });
    
    
            var store = Ext.create("Ext.data.Store", {
                model: 'TestModel',
                data: [
                    {field1: "data1Field1", field2: "data1Field2", field3: "data1Field3"},
                    {field1: "data2Field1", field2: "data2Field2", field3: "data2Field3"},
                    {field1: "data3Field1", field2: "data3Field2", field3: "data3Field3"},
                    {field1: "data4Field1", field2: "data4Field2", field3: "data4Field3"},
                    {field1: "data5Field1", field2: "data5Field2", field3: "data5Field3"},
                ]
            });
    
    
            var field = Ext.create("Ext.field.Text", {
                label: "TestField",
                placeHolder: "Enter the field value",
            });
    
    
            var list = Ext.create("Ext.dataview.List", {
                store: store,
                itemTpl: "{field1} - {field3}",
                scrollable: false,
                flex: 1,
            });
    
    
            var panel = Ext.create('Ext.Panel', {
                layout: {type: 'vbox'},
                scrollable: 'vertical',
                padding: 10,
                style: "background-color: #555555;",
                items: [
                    field,
                    {style: "height: 10px;"},
                    list,
                ],
            });
    
    
            Ext.Viewport.add(panel);
        }
    
    
    });

    HELPFUL INFORMATION

    Screenshot or Video:
    • The first attachment is the expected result and was obtained with ST 2.0.1
    • The second attachment shows the result with ST 2.1.0 RC2. The list is too tall and is scrollable (and the scrollbar doesn't seem to be styled correctly at the bottom - it is flat instead of rounded)
    Debugging already done:
    • Tested in Sencha Touch 2.0.1 and it works as expected - the "flex: 1" must be removed from the list config in the example provided. Removing "flex: 1" with 2.1.0 RC2 results in the list disappearing completely (height == 0).
    Possible fix:
    • None
    Additional CSS used:
    • None
    Operating System:
    • Windows 7
    Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    17
    Vote Rating
    0
    zwilson is on a distinguished road

      0  

    Default


    Thank you for trying to get this in front of the sencha team! I also have experienced this issue and from the old posts it looks like people have tried to bring this up but without success.
    Tested in Sencha Touch 2.0.1 and it works as expected - the "flex: 1" must be removed from the list config in the example provided. Removing "flex: 1" with 2.1.0 RC2 results in the list disappearing completely (height == 0).

    I believe that setting "flex:1" is why the list fills up the space. But as you mentioned otherwise the list is invisible because of a height of 0. In the past there was not a flex set and the height would automatically fit all the items.

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is a bi-product of the infinite list as it needs a height and since it won't possibly render all rows it needs to be scrollable to be able to detect when it needs to render the new rows.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

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

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

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

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    411
    Vote Rating
    18
    jweber will become famous soon enough

      0  

    Default


    Could that be changed so it only affects infinite lists? Finite lists could have a fixed height, and thus not scroll.

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    56
    Vote Rating
    11
    bumpy will become famous soon enough

      0  

    Default


    In my opinion, this bug is underrated.

    It breaks a very basic behavior in lists, which are very basic and highly used components.
    The result, as I already wrote in the Q&A forum, is that lists can't be nested in a scrollable vbox layout parent panels without the use of flex or fixed height.

    I'd expect the Sencha team to put this bug in a very high position in the bug list for the final release of 2.1.0.
    A temporary workaround would be appreciated too.
    I can handle myself pretty well with javascript, but fixing complex CSS-related issues in not as easy.

    Thanks

  6. #6
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    17
    Vote Rating
    0
    zwilson is on a distinguished road

      0  

    Default


    @mitchellsimoens thank you for the clarification about the changes that come along with infinite list.

    I will include my vote that if it is possible to "enable/disable" the infinite list, so that it can be used as a component with other items that would be a big perk over resorting to dataview for everything.

    In any event I encourage you to make this clear in the documentation when 2.1 is released.

    These forums are very helpful when we hear from @mitchellsimoens and his team members. Thank You!

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Location
    Sunnyvale, CA
    Posts
    4
    Vote Rating
    3
    Johan Casier is on a distinguished road

      1  

    Default


    I just tested the issue in 2.1 GA and it's still not resolved.
    I found a workaround :

    instead of

    scrollable: false

    use

    scrollable: { disabled: true }

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Tegola is on a distinguished road

      0  

    Default


    That's not working with long lists, they get cropped...
    Mitchell's example works, but looks like a stretch to me (an element inside a list?) and I still don't get what "scrollDock" means.

  9. #9
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    Yea, this really sucks. Messed up all my lists, scrolling wont turn off on any of them. Turn scrolling off on the parent container and on the list. nothing works!

    So what I'm gathering here is these new "and improved" lists will no longer fill the height of it's parent container if layout=full? I have dozens of widgets. Each widget is a container with a list in it and a toolbar up top. These widgets "used" to expand to the height of the data in the list but no longer. All of my widgets are collapsed down to 0px.

    Others are converting lists to dataviews to get around this "feature" but all I see is a lot of styling work to get a data view to look like a list.

    Again, this sucks. Please tell me there's a simple workaround to achieve what was working just fine in all previous versions of the framework.

  10. #10
    Sencha User
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    4
    Stx.Greg is on a distinguished road

      0  

    Default


    This config option will disable scrolling in a List control:
    scrollable: { disabled: true }

    Have you tried adding 'flex: 1' to your list config? If I add it to a list in a vbox container, it will fill the container.

    Quote Originally Posted by BostonMerlin View Post
    Yea, this really sucks. Messed up all my lists, scrolling wont turn off on any of them. Turn scrolling off on the parent container and on the list. nothing works!

    So what I'm gathering here is these new "and improved" lists will no longer fill the height of it's parent container if layout=full? I have dozens of widgets. Each widget is a container with a list in it and a toolbar up top. These widgets "used" to expand to the height of the data in the list but no longer. All of my widgets are collapsed down to 0px.

    Others are converting lists to dataviews to get around this "feature" but all I see is a lot of styling work to get a data view to look like a list.

    Again, this sucks. Please tell me there's a simple workaround to achieve what was working just fine in all previous versions of the framework.