How to get a list and another container with content to display in a scrollable view

[azamatoak]

I have a view which extends ST2 container which contains 2 main items. The first is a container with additional content and second item is a list. I have played with all possible combinations of layouts and cannot get both to display at the same time. Here's my code:

config: {
		scrollable: {
			direction: 'vertical',
			directionLock: true
		},
        //layout: 'fit',
		items: [
            {
                xtype: 'container',
                layout: 'vbox',
                cls: 'retailer-detail-container',
                items: [
                    {
                        xtype: 'container',
                        layout: {
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'img',
                                cls: 'offerDetailImg',
                                itemId: 'retailer-detail-image'
                            },
                            {
                                xtype: 'container',
                                layout: 'vbox',
                                items: [
                                    {
                                        xtype: 'container',
                                        layout: 'vbox',
                                        items: [
                                            {
                                                xtype: 'panel',
                                                cls: 'offer-detail-name',
                                                itemId: 'retailer-detail-name'
                                            },
                                            {
                                                xtype: 'panel',
                                                cls: 'offer-detail-distance',
                                                itemId: 'retailer-detail-distance'
                                            }
                                        ]
                                    },
                                    {
                                        xtype: 'container',
                                        cls: 'offer-detail-actions',
                                        layout: 'hbox',
                                        items: [
                                            {
                                                xtype: 'button',
                                                cls: 'retailer-detail-contact-button',
                                                itemId: 'retailer-detail-contact-button'
                                            },
                                            {
                                                xtype: 'button',
                                                cls: 'retailer-detail-map-button',
                                                itemId: 'retailer-detail-map-button'
                                            }
                                        ]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        cls: 'offer-detail-description',
                        itemId: 'retailer-detail-description'
                    }
                ]
            },
            {
                xtype: 'container',
                layout: 'fit',
                items: [
                    {
                        xtype: 'list',
                        itemId: 'retailerOffersList',
                        scrollable: false,
                        ui: 'round',
                        itemTpl: '<strong>{offer_title}</strong>',
                        onItemDisclosure: true,
                    }
                ]
            }
		]

[mitchellsimoens]

in ST 2.1 the list will always be scrollable itself. First issue I see is looks like you have overnesting going on. If you want the list not to be scrollable and have a parent container be scrollable you will need to use a dataview. Also the master container isn't using a layout.

[azamatoak]

Thanks for the response mitchell. But what I'm more interested in solving at this time is the layout issue. I am unable to get both the list and the other container with content to display correctly with full height on each element. I have tried a layout of type fit, vbox and auto on the view which is a container element in and of itself.

I have also tried enclosing the list element in a container with layout of fit without success.

[mitchellsimoens]

Try vbox and then give both first level children flex : 1

[azamatoak]

Doing that yields this:

layout-vbox-flex-1-children.png

This is not what I want as there are more elements in the list that no longer display. The flex property causes all elements to be scaled to fit to the viewport.

[mitchellsimoens]

The list should be scrollable as what I said earlier

[azamatoak]

It is by default but it causes odd jumpiness of the view. As I mentioned above, I am interested in having the entire contents of both container displayed with their full height in the view. So far, I am unable to achieve this with various layout combinations.

[shwetapande10]

I had a similar issue and resolved by hard-coding the height of the list view.

[azamatoak]

shwetapande10: Unfortunately, I cannot hard-code the height as the list is a dynamic list and can contain varying number of elements. This was also my first thought but by no means a solution to my scenario.

[shwetapande10]

You can probably write a logic to calculate the height based on the size of content that you are displaying.