Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #11
    Sencha User
    Join Date
    Mar 2007
    Posts
    416
    Vote Rating
    18
    jweber will become famous soon enough

      1  

    Default


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

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

      0  

    Default


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

  3. #13
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    17
    Vote Rating
    0
    zwilson is on a distinguished road

      0  

    Default


    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.

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

      0  

    Default


    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.

  5. #15
    Sencha User
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    0
    jcasier is on a distinguished road

      0  

    Default


    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

  6. #16
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default Lists are always scrollable (redux)

    Lists are always scrollable (redux)


    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

  7. #17
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    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


    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):

    Code:
    //<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.
    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.