1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Vote Rating
    2
    Answers
    6
    azamatoak is on a distinguished road

      0  

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

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


    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:

    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,
                        }
                    ]
                }
    		]

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    Dec 2012
    Posts
    77
    Vote Rating
    2
    Answers
    6
    azamatoak is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Try vbox and then give both first level children flex : 1
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    Dec 2012
    Posts
    77
    Vote Rating
    2
    Answers
    6
    azamatoak is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    873
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The list should be scrollable as what I said earlier
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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.

  7. #7
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Vote Rating
    2
    Answers
    6
    azamatoak is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    48
    Vote Rating
    3
    Answers
    4
    shwetapande10 is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Vote Rating
    2
    Answers
    6
    azamatoak is on a distinguished road

      0  

    Default


    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.

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    48
    Vote Rating
    3
    Answers
    4
    shwetapande10 is on a distinguished road

      0  

    Default


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