Results 1 to 7 of 7

Thread: Layout with multiple lists ?

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    9

    Default Layout with multiple lists ?

    Is it possible to create a layout with multiple lists like shown in diagram attached, with the whole container scrolling rather than individual lists scrolling ?

    x.png

    Tried many different ways, but could not achieve success.

  2. #2
    Sencha Premium User
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    72
    Answers
    17

    Default

    You could try a scrollable container that holds the two lists and based off the stores count adjust the lists height. I would suggest placing a minHeight on your lists if you decide to go this route.

    Below is a quick example with 3 views and the supporting controller adjusting the lists height. The stores just have hardcoded data but would suggest listening on the store(s) load event to adjust the height based off the count.

    Main View
    Code:
    Ext.define('Test.view.Main', {
        extend : 'Ext.Container',
        requires : [
            'Test.view.States',
            'Test.view.Reminders'
        ],
        xtype: 'main',
        config : {
            scrollable: {
                direction: 'vertical',
                directionLock: true
            },
            items : [{
                xtype : 'titlebar',
                title : 'TEST',
                docked : 'top'
            },{
                xtype : 'states'
            },{
                xtype : 'reminders'
            }]
        }
    });
    States View "List"
    Code:
    Ext.define('Test.view.States', {
        extend: 'Ext.dataview.List',
        xtype: 'states',
        config: {
            ui : 'round',
            scrollable : false,
            itemTpl : Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                '<div>{desc}</div>',
                '</tpl>'
            ),
            store: 'States'
        }
    });
    Reminders View "List"
    Code:
    Ext.define('Test.view.Reminders', {
        extend: 'Ext.dataview.List',
        xtype: 'reminders',
        config: {
            ui : 'round',
            scrollable : false,
            itemTpl : Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                '<div>{desc}</div>',
                '</tpl>'
            ),
            store: 'Reminders'
        }
    });
    Controller
    Code:
    Ext.define('Test.controller.Main', {
        extend: 'Ext.app.Controller',
        config: {
            refs: {
                Reminders : 'viewport main reminders',
                States : 'viewport main states'
            },
    
            control: {
                Main : {
                    activate : 'onActivateMain'
                }
            }
        },
    
        onActivateMain : function(){
            //set the list height based off the stores count...
            this.getStates().element.setHeight(Ext.getStore('States').getCount() * 55);
            this.getReminders().element.setHeight(Ext.getStore('Reminders').getCount() * 55);
        }
    });

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    9

    Default Works.

    Fantastic, Thank you. I was looking at this example that deals with row height too.

    http://new.senchafiddle.com/#/Eub4e/

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12

    Default

    And why does it have to be a list? It seems to me a dataview with scrollable set to false would do as well.

  5. #5
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    559
    Answers
    22

    Default

    I'm attempting this layout with a container and two data views. I'm setting the container to fit and scroll vertical. I then set each DataView to scroll:false. Nothing is shown. In fact, Chrome returns the following error:

    [WARN][Ext.dataview.DataView#applyScrollable] This container is set to scrollable: false but has no specified height. You may need to set the container to scrollable: null or provide a height.
    If I force the height on those DataViews, they show my stores data.

    What I'm seeing is not intuitive and broke at best. Can someone offer a reason as to why this doesnt work and a possible solution w/out having to force the height using a calculation? It's not like this type of layout is uncommon. Don't get me wrong, calculating the height is a no brainer but it feels like thick heavy duct-tape to a problem that should just work.

    Using Architect 2.2 with latest ST production build.

    Thanks.
    John

  6. #6
    Sencha Premium User bluehipy's Avatar
    Join Date
    Mar 2010
    Location
    Romania
    Posts
    628
    Answers
    67

    Default

    I see an Ext.form.Panel having:
    a top docked titlebar with a right aligned button.
    followed by two fieldsets,

    first sontaining a list maybe ui round cornered and a custom button,
    second a list with details view on disclosure

    :P
    Latest thoughts on the subject: http://joy2share.com/senchatouch/

  7. #7
    Sencha User
    Join Date
    Dec 2007
    Posts
    43

    Default

    bumping this up from the dead. i'm trying to create something similar with an n-height container and an n-height dataview. both of the components shouldn't be scrollable, but the parent container should be.

    update:
    I was able to get my use case to work. The parent container has "fullscreen" set to 'true' and "scrollable" set to "vertical". The child container and dataview have no height, and the dataview has "scrollable" set to 'null'. I'm using Architect, so I had to change the "scrollable" config to an object in order to be able to set it to null.
    Last edited by danderson; 17 Nov 2015 at 8:17 AM. Reason: case specific solution

Posting Permissions

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