Lists are always scrollable

[jweber]

REQUIRED INFORMATION


Ext version tested:

• Sencha Touch 2.1b3

Browser versions tested against:

• Chrome/Mac 21.0.1180.89

DOCTYPE tested against:

• html

Description:

• Setting "scrollable: false" in a List no longer prevents scrolling, like it did in beta 1.

Steps to reproduce the problem:

• In examples/list/app.js, add "scrollable: false," to the object returned at the end (line 118).

The result that was expected:

• The list doesn't scroll.

The result that occurs instead:

• The list still scrolls.

Test Case:

See above.


HELPFUL INFORMATION


Screenshot or Video:

• None

See this URL for live test case: http://


Debugging already done:

• This works in beta 1; the list doesn't scroll there.

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• ________
• WinXP Pro

[Jamie Avins]

Thanks for the report! We'll make this possible.

[jweber]

Thanks. Just to clarify, in beta 1, a list had its own height, based on the total height of the items. So if you turned off scrollability, you could have the list take up as much room as it needed, but no more. That's the behavior that I'm hoping to get back. I assume this was changed because of the infinite-scrolling feature, in which case you obviously can't know the total height of the items. But hopefully there's a way to tell it that you have a finite data store.

[jweber]

This is still happening in 2.1rc1. Does anyone know if there's a workaround? This makes it difficult to have a list inside a scrolling parent container, since you'll end up with two scrollbars.

[Tegola]

I've got a similar issue. I have a container followed by a list, both inside a parent container. I want to scroll the parent container and not the list, so I set scrollable: true to the parent container and scrollable: false to the list. but the list it's rendered with height: 0.

This is working correctly on Sencha 2.0.1.1, not anymore with 2.1rc1

[gubarez]

A work-around:

0. disable the scroller (on load)


1. set the data
2. get the number of items
3. calculate the height (if possible)
4. set the height


If you need to refresh the list - set the height to null, then - start over with the steps above

Something like this... still struggling with the first time the element is painted...

scrollable: {
                scroller: {
                    disabled: true
                }
            },
initialize: {
                    fn: function () {                        
                        this.on('refresh', function () {
                            this.setHeight(null);
                        }, this, {order: 'before'});
                        this.on('painted', function () {
                            this.setHeight(this.getStore().getData().items.length*itemHeight);
                            this.element.redraw();
                        }, this, {order: 'after'});
                        
                    },
                    single: true
                }

[gubarez]

I did some more research here...
Nut sure, but the problem probably occurs, since only fit layout is allowed for list components.
I believe, if the scroller is set to false, the layout should be default... But this is not allowed by design.

A real workaround is to use dataview instead of list.

[Tegola]

A component is a component, and I should be able to put it in a container and let it overflow that container, no matter how much room it needs. What if the list was simply a multi-line paragraph that required me to set its height?

[jweber]

DataView does have this ability. Unfortunately I've been relying on Ext.ux.touch.grid, which recently changed to a List implementation.

[Tegola]

Breaking a so widely used component in a minor release is a bad idea.
I'll stick with v2.0.1.1 until 2.1 exits the beta stage, but it's a shame we can't get to know what Sencha developers think is the right approach with the new list component, and if this behavior will stick in the final version or not.