"scrollDocked" items inside a list will render inside the first list item

[Tegola]

As the subject says.
A docked item should be rendered outside the first item.

Test case here:
http://new.senchafiddle.com/#/l3e2N/

[mitchellsimoens]

This is expected behavior and not a bug.

[Tegola]

So what's the best way to add an element at the beginning of a grouped list and make it scroll with it?

[jensenl]

You guys are aware that this produces some odd side effects, right?

Such as, it is hard to get a disclosure icon to align correctly in the first list item when the scrollDocked items are added to it, the scrollDocked items get (visually) selected along with the first list item, the scrollDocked items do not show up if the list is empty, and there is no ability to have multiple lists stacked vertically in a view without setting a fixed height.

I'm sure that one can find work-arounds for most of this but it starts to feel like you are fighting against Sencha Touch rather than being enabled by it.

EDIT: One other oddity to add, the list group header for the first list item shows up above scrollDocked items.

[Tegola]

EDIT: One other oddity to add, the list group header for the first list item shows up above scrollDocked items.

That's what I've started this thread for, but you added some good points.

[Tegola]

I haven't tested it yet, but seems that this has been fixed in Touch 2.2.0 beta 1, as stated by the release notes:
http://cdn.sencha.com/touch/sencha-t...ase-notes.html

Updated List to have headers not be nested inside the ListItem

While I'm happy it has been fixed, I have to say that the way submitted bugs are managed is very questionable.

Anyway, thanks to the Sencha team.

[Hertz]

I'm having the same issue and I don't think this should be the normal behavior as mitchellsimoens mentions.

I'm using Sencha Touch 2.2 RC.

In Sencha Touch 2.0.1 this scenario was handled correctly, since any item added to a list (via the items config property), was inserted outside the list items.

The scenario that I have is the following:

The Main View needs to display a list of articles, which are grouped by Section, but inside this same view I need to display a Carousel at the top, which also contains articles but from a "featured" Section.
The way the scrollDocked items are being inserted in Sencha Touch 2.2 RC doesn't allow me to do this.

Sencha Fiddle Result:
http://api.senchafiddle.com/v3/full/kC5vu/

Ext.Loader.setConfig({
    enabled : true
});


Ext.application({
    name : ('SF' || 'SenchaFiddle'),
    
    launch : function() {
        Ext.create('Ext.List', {
            fullscreen : true,
            grouped: true,
            scrollable: {
                direction: 'vertical',
                directionLock: true
            },
            items: [{
                xtype: 'carousel',
                scrollDock: 'top',
                height: 300,
                padding: 20,
                items: [
                    { html: 'This is also an Article but it belongs to the Featured Section and it is presented in a Carousel</br></br>But the group header will confuse users, since it says Entertainment' },
                    { html: 'Another Article that belongs to the Featured Section and is presented in a Carousel' }
                ],
                style: 'background: green; border: 1px solid silver; color: white'
            }],
            store: {
                grouper: 'group',
                data: [
                    { text: 'Article 1', group: 'Sports' },
                    { text: 'Article 2', group: 'Sports' },
                    { text: 'Article 3', group: 'Entertainment' },
                    { text: 'Article 4', group: 'Entertainment' },
                    { text: 'Article 5', group: 'Entertainment' },
                    { text: 'Article 6', group: 'Entertainment' },
                    { text: 'Article 7', group: 'Fashion' },
                    { text: 'Article 8', group: 'Fashion' },
                    { text: 'Article 9', group: 'Fashion' },
                    { text: 'Article 10', group: 'Fashion' },
                    { text: 'Article 11', group: 'Fashion' },
                    { text: 'Article 12', group: 'Fashion' },
                    { text: 'Article 13', group: 'Fashion' },
                    { text: 'Article 14', group: 'Fashion' }
                ]
            }
        });
    }
});

Technically it might not be a bug, but as others in the post have mentioned, this should not be the normal behavior.

Is there any workaround for this?. How could I create an UI like the one I mention (the Carousel being outside of the list items)?.