Threaded 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