Lists are always scrollable

[jweber]

Sencha folks -- can you give us some insight as to why this was closed? Is this not going to be fixed? Thanks.

[Tegola]

I'm also waiting for an official answer...

[zwilson]

I believe this is the bug that is causing my problems too. I can no longer add a list to a container (vbox) and have the list sized automatically, with a form panel below my list. In the past I achieved this by setting scrollable: false on the list and on the form panel.

For now I did work around this problem by using a DataView with scrollable: false.

A fix would be appreciated.

[Tegola]

The main thing here is that the List component can't be an inline object anymore. In order to build the list elements while scrolling it has to know its boundaries, and thus it needs a specific height/width.

I don't know you, but I would like a way for it to build the entire list (=disable the infinite scrolling functionality) as an option when instantiating the component.

[jcasier]

I am seeing the same thing in 2.1 RC2.

There seems to be a side effect on the disclose button "sensitivity" on a list. It has become quite unresponsive. Needs several taps for the disclose events to fire.
Also, the disclose tap does not fire an onitemtap event any more like it did in 2.0
It has also become possible to a "double tap" on the disclose button and have 2 disclose events fire in a row.

All this stuff worked fine in 2.0

[jep]

This other bug report has been closed and ignored by Sencha staff (at least, as far as we the users can see). I'm not sure what other way to get Sencha to pay attention to it so I'm opening a bug report about the bug report:

http://www.sencha.com/forum/showthre...ays-scrollable

[mitchellsimoens]

With the new infinite list there is no direct relationship with a record and a list item element. The list needs to be scrollable in order to interject the other records into the list. Like if you have 100 records in the store, maybe only 10 will actually be rendered. If the list wasn't scrollable then you would not be able to render the other 90 records which is bad.

I'm assuming you are wanting to have the list not be scrollable, put it in a container that is scrollable and have a button at the end of the list so when you scroll to the bottom you will of course see the button. This worked before the infinite list but you are still rendering quite a lot of list items which will increase DOM size which will negatively affect performance. Instead you can still take advantage of the infinite list but still get a button at the "bottom" of the list. Here is the app.js from the list example I have modified to get a button at the bottom (crucial configs are in red):

//<debug>
Ext.Loader.setPath({
    'Ext': '../../src'
});
//</debug>

/**
 * This simple example shows the ability of the Ext.List component.
 *
 * In this example, it uses a grouped store to show group headers in the list. It also
 * includes an indicator so you can quickly swipe through each of the groups. On top of that
 * it has a disclosure button so you can disclose more information for a list item.
 */

//define the application
Ext.application({
    //define the startupscreens for tablet and phone, as well as the icon
    startupImage: {
        '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
        '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
        '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
        '768x1004': 'resources/startup/768x1004.png', //  Non-retina iPad (first and second generation) in portrait orientation
        '748x1024': 'resources/startup/748x1024.png', //  Non-retina iPad (first and second generation) in landscape orientation
        '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
        '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
    },

    isIconPrecomposed: false,
    icon: {
        57: 'resources/icons/icon.png',
        72: 'resources/icons/icon@72.png',
        114: 'resources/icons/icon@2x.png',
        144: 'resources/icons/icon@144.png'
    },

    //require any components/classes what we will use in our example
    requires: [
        'Ext.MessageBox',
        'Ext.data.Store',
        'Ext.List',
        'Ext.plugin.PullRefresh'
    ],

    /**
     * The launch method is called when the browser is ready, and the application can launch.
     *
     * Inside our launch method we create the list and show in in the viewport. We get the lists configuration
     * using the getListConfiguration method which we defined below.
     *
     * If the user is not on a phone, we wrap the list inside a panel which is centered on the page.
     */
    launch: function() {
        //get the configuration for the list
        var listConfiguration = this.getListConfiguration();

        //if the device is not a phone, we want to create a centered panel and put the list
        //into that
        if (!Ext.os.is.Phone) {
            //use Ext.Viewport.add to add a new component into the viewport
            Ext.Viewport.add({
                //give it an xtype of panel
                xtype: 'panel',

                //give it a fixed witdh and height
                width: 350,
                height: 370,

                //make it centered
                centered: true,

                //make the component modal so there is a mask around the panel
                modal: true,

                //set hideOnMaskTap to false so the panel does not hide when you tap on the mask
                hideOnMaskTap: false,

                //give it a layout of fit so the list stretches to the size of this panel
                layout: 'fit',

                //insert the listConfiguration as an item into this panel
                items:[listConfiguration]
            });
        } else {
            //if we are a phone, simply add the list as an item to the viewport
            Ext.Viewport.add(listConfiguration);
        }
    },

    /**
     * Returns a configuration object to be used when adding the list to the viewport.
     */
    getListConfiguration: function() {
        //create a store instance
        var store = Ext.create('Ext.data.Store', {
            //give the store some fields
            fields: ['firstName', 'lastName'],

            //filter the data using the firstName field
            sorters: 'firstName',

            //autoload the data from the server
            autoLoad: true,

            //setup the grouping functionality to group by the first letter of the firstName field
            grouper: {
                groupFn: function(record) {
                    return record.get('firstName')[0];
                }
            },

            //setup the proxy for the store to use an ajax proxy and give it a url to load
            //the local contacts.json file
            proxy: {
                type: 'ajax',
                url: 'contacts.json'
            }
        });

        return {
            //give it an xtype of list for the list component
            xtype: 'list',

            //set the itemtpl to show the fields for the store
            itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',

            //enable disclosure icons
            disclosure: true,

            //group the list
            grouped: true,

            //enable the indexBar
            indexBar: true,

            //set the function when a user taps on a disclsoure icon
            onItemDisclosure: function(record, item, index, e) {
                //show a messagebox alert which shows the persons firstName
                e.stopEvent();
                Ext.Msg.alert('Disclose', 'Disclose more info for ' + record.get('firstName'));
            },

            //bind the store to this list
            store: store,

            items : [
                {
                    xtype      : 'button',
                    text       : 'My Button',
                    scrollDock : 'bottom',
                    docked     : 'bottom'
                }
            ]
        };
    }
});

Now when you scroll all the way to the bottom, you will see the My Button button at the end and you are still having the infinite list.

If you don't want this still then you won't be able to use the List, it's pretty much impossible to do unless you want to set the item heights yourself. You can still use DataView and style it and turn off scrolling but you would loose the LIst features like grouping. Or of course you can use a Container and a tpl yourself.