2.1: Lists within a container

[JeffreyHoffman]

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:

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!

[jweber]

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.

[JeffreyHoffman]

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

[TrevorMills]

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.

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){
                    me.setHeight(me.getItemMap().getTotalHeight());
                });
            }
        }
    }
});

[azamatoak]

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.

[TrevorMills]

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.