How do you create one panel with multiple lists?

[hugesuccess]

I want to create one panel with multiple different lists. I've seen some stuff on the forums about creating two lists that scroll independently of one another, but that's not exactly what I'm looking for. I want them to scroll as one uber list, but with totally different types of content and styles. Here's an example of kind of what I'm going for.



photo-4.jpg

Here is the code I have so far.

MixtapeMachine.levelOne = createMixtapePage({
                                        id: 'levelOne',
                                        fullscreen: true,
                                        items: [
                                                createMixtapeList({
                                                id: 'levelonelist',
                                                store: MixtapeMachine.levelOneStore,
                                                onSelect: function(list, index){
                                                        Ext.dispatch({
                                                                controller: MixtapeMachine.controllers.MainController,
                                                                action: 'onLevelOneSelect',
                                                                list: list,
                                                                index: index    
                                                        });
                                                },
                                                plugins: [MixtapeMachine.noload_footer_plugin]
                                        })],
                                        dockedItems: [{
                                                xtype: 'toolbar',
                                                title: 'Mixtape Machine',
                                        }],
                                });

I've been trying to add another list to the items array, but I just can't seem to get it. Can anybody help? createMixtapeList() uses the factory method to return list item, in case your wondering.

[mitchellsimoens]

If you want them stacked on top of each other... the Panel should use vbox layout with align: 'stretch' and each list can use the flex property to size the height. The width will fill the available width due to the align : 'stretch'

[hugesuccess]

Thanks so much for your help. Now I have two lists in my panel. But both lists scroll independently and clip. When I change the flex, it alters the height of one list or the other, but they still scroll independently(Only one scroll's at a time). Is there any way I can get them to scroll as one list?

  MixtapeMachine.levelOne = createMixtapePage({
                                        id: 'levelOne',
                                        fullscreen: true,
                                        layout: {
                                                type: 'vbox',
                                                align: 'stretch'
                                        },
                                        items: [createMixtapeList({
                                                id: 'leveltwolist',
                                                flex: 5,
                                                store: MixtapeMachine.LevelTwo_Mixtapes,
                                                onSelect: function(list, index){

                                                        Ext.dispatch({
                                                                controller: MixtapeMachine.controllers.MainController,
                                                                action: 'onLevelTwoSelect',
                                                                list: list,
                                                                index: index    
                                                        });
                                                },
                                                plugins: [MixtapeMachine.noload_footer_plugin]
                                        }),
                                                createMixtapeList({
                                                id: 'levelonelist',
                                                flex: 3,
                                                store: MixtapeMachine.levelOneStore,
                                                onSelect: function(list, index){
                                                        Ext.dispatch({
                                                                controller: MixtapeMachine.controllers.MainController,
                                                                action: 'onLevelOneSelect',
                                                                list: list,
                                                                index: index    
                                                        });
                                                },
                                                plugins: [MixtapeMachine.noload_footer_plugin]
                                        })],
                                        dockedItems: [{
                                                xtype: 'toolbar',
                                                title: 'Mixtape Machine',
                                        }],
                                });

Thanks for your help!!!

[mitchellsimoens]

Use one list. You can try getting the Lists to auto height but good luck on that.

[borden0108]

layout : 'vbox',
scrollable: 'vertical',

[diractor]

Hi there, I am sitting with the exact same problem. No matter what I try, I only get the first list shown on my panel. Here is my code:

Ext.define('myApp.view.myView', {
    extend: 'Ext.Panel',
    xtype: 'myview',
    config: {
        title: 'My View',
        fullscreen: true,
        iconCls: 'note2',
        layout: 'vbox',
        scrollable: 'vertical',
        items: [
            {
                xtype: 'toolbar',
                ui: 'neutral',
                title: 'This is my Title that should scroll with the whole panel'
            },
            { xtype: 'toolbar', title: 'List 1'},
            {
                xtype: 'list',
                scrollable: false,
                store: {
                    fields: ['firstName'],
                    data: [
                        {firstName: 'Hujuk'},
                        {firstName: 'Schnulli'},
                        {firstName: 'Bulli'}
                    ]
                },
                itemTpl: '{firstName}'
            },
            { xtype: 'toolbar', title: 'List 2'},
            {
                xtype: 'list',
                store: {
                    fields: ['firstName'],
                    data: [
                        {firstName: 'Lala'},
                        {firstName: 'Dipsy'},
                        {firstName: 'Poe'}
                    ]
                },
                itemTpl: '{firstName}'
            }
        ]
    }
});

So I want a title on top, that scrolls with the whole thing. Every List on the panel should have its own toolbar on top. I can see the title, all the toolbars, but only the first list. Any ideas?

Thank you in advance.

[diractor]

Sorry for bothering, but I found the solution by myself. In case anybody here is struggeling with the same thing, this is what I found out:

1. The layout of the surrounding container needs to be vbox and needs scrollable set to vertical.
2. Each of the contained lists needs to have scrollable set to false.

In my case I missed to set scrollable to false on the second list, which made it disappear.