[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