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,408
    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
    413
    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
    Jun 2011
    Posts
    46
    Vote Rating
    1
    gubarez is on a distinguished road

      0  

    Default


    Workaround - use dataview instead... You only loose the pull-refresh and load-more plugins...

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

      0  

    Default


    Quote Originally Posted by gubarez View Post
    Workaround - use dataview instead... You only loose the pull-refresh and load-more plugins...
    That doesn't quite work. Here is the result when I change my List component to a DataView:

    SenchaTouch2.1.0rc2_DataView.png

  9. #9
    Sencha User
    Join Date
    Jun 2011
    Posts
    46
    Vote Rating
    1
    gubarez is on a distinguished road

      0  

    Default


    you should fix your CSS too

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

      1  

    Default


    Mitchell,
    I saw your post in the Lists are always scrollable thread, and it sounds like Sencha's position is that the infinite list feature breaks the "scrollable: false" behavior and it is up to developers to manually set the height and style the items in a generic DataView to get the old unscrollable list behavior.

    We have some use cases where we would like to display all items in a list (within a scrollable parent container) and the number of items would never be large enough to affect performance.

    It would be convenient if there was a way to turn off the infinite list feature (perhaps simply with "scrollable: false"). Is that something Sencha might consider? I ask because I am working on a migration plan from Touch 2.0.1 to 2.1 and it would be good to know whether we need to build new custom controls.