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

[Johan Casier]

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 }

[Tegola]

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.

[BostonMerlin]

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.

[Stx.Greg]

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.

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.