Results 1 to 7 of 7

Thread: How do you create one panel with multiple lists?

  1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    1
      0  

    Default How do you create one panel with multiple lists?

    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.

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

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,412
    Vote Rating
    1288
      0  

    Default

    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'
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    1
      0  

    Default Well now I have two lists, but not the right scroll...

    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?


    Code:
      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!!!

  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,412
    Vote Rating
    1288
      0  

    Default

    Use one list. You can try getting the Lists to auto height but good luck on that.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    47
    Vote Rating
    0
      0  

    Default

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

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Location
    Berlin
    Posts
    50
    Vote Rating
    2
      0  

    Default Still no luck

    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:

    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.

  7. #7
    Sencha User
    Join Date
    Mar 2012
    Location
    Berlin
    Posts
    50
    Vote Rating
    2
      0  

    Default Answering to myself

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •