Thank you for reporting this bug. We will make it our priority to review this report.
  1. #11
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Why do you have the list within a scrollable container?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  2. #12
    Sencha User
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    4
    Stx.Greg is on a distinguished road

      0  

    Default


    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

  3. #13
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      -1  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #14
    Sencha User
    Join Date
    Feb 2012
    Posts
    22
    Vote Rating
    4
    Stx.Greg is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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?

    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"},
                        {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);
            }
    
    
        });

  5. #15
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #16
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    16
    Vote Rating
    0
    vishpool is on a distinguished road

      0  

    Default


    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?

  7. #17
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    16
    Vote Rating
    0
    vishpool is on a distinguished road

      0  

    Default


    Quote Originally Posted by vishpool View Post
    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?

  8. #18
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Tegola is on a distinguished road

      0  

    Default


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

  9. #19
    Sencha User
    Join Date
    Aug 2012
    Location
    Sunnyvale, CA
    Posts
    4
    Vote Rating
    3
    Johan Casier is on a distinguished road

      1  

    Default


    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 }

  10. #20
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Vote Rating
    4
    Tegola is on a distinguished road

      0  

    Default


    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.