[2.1.0 RC2] - Unscrollable List is Scrollable

[Stx.Greg]

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:

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

[zwilson]

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.

[mitchellsimoens]

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.

[jweber]

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

[bumpy]

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

[zwilson]

@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!

[gubarez]

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

[Stx.Greg]

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

[gubarez]

you should fix your CSS too

[Stx.Greg]

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.