Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

  1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    2
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    2
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    Try vbox and then give both first level children flex : 1
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  5. #5
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    2
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    The list should be scrollable as what I said earlier
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #7
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    2
      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
    Answers
    4
    Vote Rating
    3
      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
    Answers
    6
    Vote Rating
    2
      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
    Answers
    4
    Vote Rating
    3
      0  

    Default

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

Page 1 of 2 12 LastLast

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
  •