1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    4
    JeffreyHoffman is on a distinguished road

      2  

    Default Unanswered: 2.1: Lists within a container

    Unanswered: 2.1: Lists within a container


    Upgraded from Sencha Touch 2.0 to 2.1 this morning because we are eager to take the new List component for a spin. The upgrade process was straight-forward and almost everything worked out-of-the-box. Thanks!

    The one problem we're having is related to the new List component. In 2.0, we would embed one or more non-scrollable Lists with rounded UI on a container to group data and actions in a native-feeling way. Here are some screenshots from the Sencha Touch 2.0-version of our app which illustrates what we're trying to achieve:

    screen2.jpgscreen1.jpg

    In the first screenshot, there are two Lists (both non-scrollable, rounded UI, and the second has styled HTML content "Shop By Room" in a scrollable parent container. In the second screenshot, it is a container with a List that has an Img in it's items array.

    These Lists no longer work under 2.1 - first, their edges are not rounded and second they won't appear unless I specify a height and when I do that, "interesting" things happen to the scrollbar. (Sometimes several scrollbars appear and the screen jumps around while scrolling.)

    Here's a basic code sample that is essentially what is happening in both cases:

    Code:
    Ext.define('Alice.view.Search', {
      extend: 'Ext.Container'
      config: {
        scrollable: 'vertical',
        items: [
          {
            itemTpl: new Ext.XTemplate(...),
            xtype: 'list',
            scrollable: false,
            ui: 'round',
            store: 'store_a'
          },
          {
            itemTpl: new Ext.XTemplate(...),
            xtype: 'list'
            scrollable: false,
            ui: 'round',
            html: 'Shop By Room',
            styleHtmlContent: true,
            store: {
              model: 'Alice.model.Category'
            }
          }
        ]
    });
    What is the right way to achieve this UI in 2.1? Is List no longer a reasonable component to use? Your assistance is appreciated. Thank you!

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    411
    Answers
    5
    Vote Rating
    17
    jweber will become famous soon enough

      0  

    Default


    There have been a lot of bugs raised about this, but it sounds like they're not going to fix it. You'll have to make do with DataView instead.

    See here and here.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    4
    JeffreyHoffman is on a distinguished road

      2  

    Default


    Thanks for pointing me toward those two bug reports. I spent some time converting my List into a DataView and the results are very promising. I wrote up a blog post on what I did to create the component and how I styled it in case anyone is interested.

    http://jeffreyhoffman.posterous.com/...s-to-dataviews

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Location
    Barrie, ON, Canada
    Posts
    17
    Answers
    3
    Vote Rating
    2
    TrevorMills is on a distinguished road

      1  

    Default A workaround?

    A workaround?


    I had the exact same issue as this - I wanted a non-scrollable list to appear as a component of a panel. When upgrading to ST 2.1, I found that initially the list disappeared (because it didn't have a height). Following other posts around the webs, I tried giving my panel a `layout` of 'vbox' and the list a `flex` of 1. That made the list appear, but then the list was scrollable, and this layout didn't really work if I wanted more than one list to appear on a panel.

    It took a bunch of head-banging tries to get my hands on the DOM elements representing the list. For some reason list.query('listitem') returned nothing (was I doing something wrong?). Eventually I started looking at the source code for Ext.dataview.List and came across pieces that led to a solution.

    Here it is with some comments. Maybe this will be of use to someone else.

    Code:
    panel.add({    xtype: 'list',
        itemTpl: itemTpl,
        store: store,
        scrollable: { disabled: true }, // the right way to disable scrolling
        listeners: {
            initialize: function (list, eOpts){
                // Sencha Touch version 2.1 added list.getItemMap(), which is a 
                // getter for a private collection of the actual elements.  In it is a handy
                // function getTotalHeight().  It works in tandem with the `refresh` event
                // on the scroller, which seems to keep firing until the scroller is completely
                // rendered (which you think might have been when the list was `painted`, but
                // oh no, you'd be wrong).  This code is to give the list-within-a-panel the proper
                // height.  
                var me = this;
                if (typeof me.getItemMap == 'function'){
                    me.getScrollable().getScroller().on('refresh',function(scroller,eOpts){
    					switch(Ext.version.version){
    					case '2.1.0':
    						me.setHeight(me.getItemMap().getTotalHeight());
    						break;
    					case '2.2.1':
    					default:
    						me.setHeight(scroller.getSize().y); // And this is what seems to work for 2.2.1, and 2.3.1
    						break;
    					}
                    });
                }
            }
        }
    });
    Edit: updated this post to include the workaround for 2.2.1 and above (issue still present in 2.3.1).

  5. #5
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    2
    azamatoak is on a distinguished road

      0  

    Default


    I'm having a similar problem as per here: http://www.sencha.com/forum/showthre...368#post938368.

    Per the solution you've suggested, I don't see the getItemMap() function on the documentation for the list class. Also, you're chaining me.getScrollable() which according to the documentation again is not chainable and returns a boolean. So, I'm not seeing how you can call .getScroller() on a boolean value.

    Any help would be much appreciated as I've been struggling with this for a while now.

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Location
    Barrie, ON, Canada
    Posts
    17
    Answers
    3
    Vote Rating
    2
    TrevorMills is on a distinguished road

      1  

    Default


    Hi azamatoak,

    getItemMap() is not documented. It exists because xtype: 'list' gets instantiated with a private config variable itemMap (thus creating the 'magic' methods getItemMap(), setItemMap() and applyItemMap() all within the list class.

    I think the docs reporting that getScrollable() returns a boolean is false. It returns an Ext.scroll.View as per http://docs.sencha.com/touch/2-1/#!/...-getScrollable.

    Hope this helps. The solution I provided has been working for me. We'll see what happens when ST 2.2 comes out.

    Obviously relying on private methods is not recommended practice, but I really couldn't find any other way until I stumbled on this solution. You'll note I wrapped it in a check to see if the getItemMap function exists.

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    83
    Answers
    2
    Vote Rating
    1
    scottd is on a distinguished road

      1  

    Default Touch 2.2.0 breaks getItemMap(), so now we can't scroll

    Touch 2.2.0 breaks getItemMap(), so now we can't scroll


    We just started using version 2.2.0 and have discovered that our list scrolling workaround no longer works . Now we have no method at all to keep our UI from failing to scroll to the selected item.

    We used to use this code on a selectfield's list to find the offset of the item that was programmatically selected:

    var map = Mob.ref.RoleList.getItemMap();
    var offsetTop = map.map[index];

    This works in 2.1.1. Now, with 2.2.0, the item map's map property (map.map) returns an empty array. Anybody know what replaces it, if anything?

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    248
    Answers
    2
    Vote Rating
    24
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    You might not need the workaround anymore, in 2.2 lists got reverted back to their simple layout from before 2.1 by default.... the config infinite: true now has to be set to activate the behavior that was introduced in 2.1 and caused your problems
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace