Results 1 to 10 of 26

Thread: [2.1.0 RC2] - Unscrollable List is Scrollable

Threaded View

Previous Post Previous Post   Next Post Next Post
    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Vote Rating

    Default [2.1.0 RC2] - Unscrollable List is Scrollable


    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
    • Unscrollable list is scrollable and list height expands to fill all available space.
    • I think the same issue was reported here:, 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:
        name: 'SenchaTest',
        launch: function () {
            Ext.define('TestModel', {
                extend: '',
                config: {
                    fields: [
                        {name: 'field1'},
                        {name: 'field2'},
                        {name: 'field3'},
            var store = Ext.create("", {
                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: [
                    {style: "height: 10px;"},


    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 Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts