Why don't components scroll?

[jay@moduscreate.com]

Looks like Container only observes scrollable. What if you wanted a component with hundreds of lines of HTML?

[Jacky Nguyen]

Components no longer have scrollable behavior to keep their DOM structure fast and minimal. Use Containers instead.

[Jamie Avins]

Components no longer have scrollable behavior to keep their DOM structure fast and minimal. Use Containers instead.

In fact, DataView does this!

[phil.fuse]

i'm in the process of slowly migrating my app to see what performance gains we're getting.
my app had a vertical scrolling vbox and in that it had several rows of horizontal scrolling hbox's.
i've just hacked an extremly quick version of this here...

createItems = function(number) {
            var items = [];
            for (var i = 0; i < number; i++) {
                items.push(
                        {
                            html: '<div style="height:188px;width:100px;background-color: red; margin: 10px"></div>',
                        }
                )
            }
            return items;
        };


        createTitle = function() {
            return Ext.create("Ext.Container", {
                html : "sencha 2.0.0"
            });
        };


        createContainer = function() {
            return Ext.create("Ext.Container", {
                layout: 'hbox',
                scrollable : {
                    direction : 'horizontal',
                    useIndicators : true
                },
                width: window.innerWidth,
                height: 198,
                items :createItems(20)
            })
        };


        Ext.application({
            name: 'POC',
            launch: function() {
                var main = Ext.create("Ext.Container", {
                    layout: 'vbox',
                    scrollable : {
                        direction : 'vertical',
                        useIndicators : true
                    },
                    items : [
                        createTitle(),
                        createContainer(),
                        createContainer(),
                        createContainer(),
                        createContainer(),
                    ]
                }).show();
            }});

you'll notice that you can scroll horizontally and vertically at the same time - the same code written for sencha1 will only scroll in one direction at a time.
i'm assuming this was intention - but is it configurable at all?
i don't see anything in the docs quite yet about the 'scrollable' property and it doesn't seem to be taking into account fps, acceleration, friction etc...

so i'm wondering if the design of my app will even work if i migrate it to v2.

[TommyMaintz]

Hi Phil,

Having a horizontal scrollable inside of a vertical currently doesn't work quite right. Before, as soon as you started scrolling in one direction, it would cancel the scroll of the scroller with the other direction. This is the expected behavior. Unfortunately we haven't implemented this particular feature in the new scroller yet. This is one of our higher priorities, so expect this to be fixed very soon.

We do suggest keeping the fps option to 'auto', as it makes sure the performance is the best possible across all the devices. You can still configure the acceleration and friction. They are now more organized in a momentumEasing config as you can actually control these variables for different parts of the scrolling experience. The following shows a highly customized (and probably completely unpractical/non-functional) scroller

    scrollable: {
        direction : 'vertical',
        indicators: false,
        momentumEasing: {
            momentum: {
                acceleration: 60,
                friction: 0.8
            },

            bounce: {
                acceleration: 10,
                springTension: 0.1
            }
        },

        // This is used when snapping is turned on, like in a Picker
        snapEasing: {
            duration: 400,
            exponent: 4
        },

        // This is used when dragging the list out of bounds. E.g. 0.5 causes
        // the scroller to move half a pixel for every pixel you drag it as
        // soon as you are out of bounds.
        outOfBoundRestrictFactor: 0.5
    } 

[phil.fuse]

configuration options look great - i'll have a play...
really looking forward to the next release - great work..!!
...
yeah the fps i didn't really like playing with to be honest...
it was something i was playing (read hacking) with as we're having to support the HTC Desire which is proving to be an absolute nightmare.
- just posted something about it here http://www.sencha.com/forum/showthre...Android-issues

v2 is MUCH better but unfortunately it's looking a little like we'll have to redesign / drop support for this device which i know our client will not like at all...
...

[TommyMaintz]

What specifically doesn't work on the HTC Desire in Touch 2.0? I am quite sure we tested for this device and are not aware of any serious performance issues.

[phil.fuse]

thanks tommy - you answered it in another thread http://www.sencha.com/forum/showthre...ssues&p=660252