[2.1.0 RC2] - Unscrollable List is Scrollable

[mitchellsimoens]

Why do you have the list within a scrollable container?

[Stx.Greg]

One example is on an order summary screen, to show a parts used list, parts returned list, and a customer signature at the bottom.

Another case is we have a custom control that emulates the controls on the iOS settings screen. There are multiple lists of settings where all items in each list are displayed, and the screen scrolls so the user can view all the settings.

ios_settings.jpg

[mitchellsimoens]

The settings screen can easily be done with one list. And for having something at the bottom of a list, we have a means to add components to the end of the list that will show up when you scroll to the bottom.

[Stx.Greg]

The settings screen can easily be done with one list.

Ok, here is an updated test case with 15 items in the list. I would like to show all 15 items in the list and not allow the list to scroll - the parent container will be scrollable.

When I set "scrollable: false" on the list, it is still scrollable and the height of the List component doesn't expand to show all items.

How can I show all the items and disable scrolling?

    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"},
                    {field1: "data6Field1", field2: "data6Field2", field3: "data6Field3"},
                    {field1: "data7Field1", field2: "data7Field2", field3: "data7Field3"},
                    {field1: "data8Field1", field2: "data8Field2", field3: "data8Field3"},
                    {field1: "data9Field1", field2: "data9Field2", field3: "data9Field3"},
                    {field1: "data10Field1", field2: "data10Field2", field3: "data10Field3"},
                    {field1: "data11Field1", field2: "data11Field2", field3: "data11Field3"},
                    {field1: "data12Field1", field2: "data12Field2", field3: "data12Field3"},
                    {field1: "data13Field1", field2: "data13Field2", field3: "data13Field3"},
                    {field1: "data14Field1", field2: "data14Field2", field3: "data14Field3"},
                    {field1: "data15Field1", field2: "data15Field2", field3: "data15Field3"},
                ]
            });


            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);
        }


    });

[mitchellsimoens]

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'  },
        { field1 : 'data6Field1',  field2 : 'data6Field2',  field3 : 'data6Field3'  },
        { field1 : 'data7Field1',  field2 : 'data7Field2',  field3 : 'data7Field3'  },
        { field1 : 'data8Field1',  field2 : 'data8Field2',  field3 : 'data8Field3'  },
        { field1 : 'data9Field1',  field2 : 'data9Field2',  field3 : 'data9Field3'  },
        { field1 : 'data10Field1', field2 : 'data10Field2', field3 : 'data10Field3' },
        { field1 : 'data11Field1', field2 : 'data11Field2', field3 : 'data11Field3' },
        { field1 : 'data12Field1', field2 : 'data12Field2', field3 : 'data12Field3' },
        { field1 : 'data13Field1', field2 : 'data13Field2', field3 : 'data13Field3' },
        { field1 : 'data14Field1', field2 : 'data14Field2', field3 : 'data14Field3' },
        { field1 : 'data15Field1', field2 : 'data15Field2', field3 : 'data15Field3' }
    ]
});

var list = Ext.create('Ext.dataview.List', {
    store   : store,
    itemTpl : '{field1} - {field3}',
    flex    : 1,
    items   : [
        {
            xtype       : 'textfield',
            label       : 'TestField',
            placeHolder : 'Enter the field value',
            scrollDock  : 'top',
            docked      : 'top'
        }
    ]
});

Ext.Viewport.add(list);

That has a textfield at the top and supports infinite list

[vishpool]

Mitchell,

I've a similar use case, but with a custom component (instead of TextField) which has variable (expandable) height. If this were to be expanded by user, the next item (rendered off store) overlaps it and takes over any touch interactions. Is there a way to force/refresh item heights with such list elements so other list items are offseted correctly?

[vishpool]

Mitchell,

I've a similar use case, but with a custom component (instead of TextField) which has variable (expandable) height. If this were to be expanded by user, the next item (rendered off store) overlaps it and takes over any touch interactions. Is there a way to force/refresh item heights with such list elements so other list items are offseted correctly?

List.refresh() seems to do the trick. Is this the best way?

[Tegola]

I didn't know "scrollDock". What does it do?

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