Results 1 to 2 of 2

Thread: how can I let the parent Ext.Panel scroll, but the child Ext.List not

  1. #1

    Default Answered: how can I let the parent Ext.Panel scroll, but the child Ext.List not

    If I didn't set the height of child Ext.List, the child list height will be 0.
    I want the child list's height to be auto, and let its parent Ext.Panel to scroll.

    Code:
    Ext.define('plugin.view.ProductsList', {    
        extend: 'Ext.Panel',
        id: 'ProductsList',
    
    
        config: {
            scrollable: {
                direction: 'vertical',
                directionLock: true
            },
            layout: 'fit',
            items: [
                    {
                        xtype: 'panel',
                        id: 'productCarousel',
                        height: (ASVari.ScreenSize.h - 50) / 2 + 'px',
                        scrollable: false,
                        html:''
                    },
                    {
                        xtype : 'list',
                        id: 'productList',
                        itemTpl: '...'
                        //height: '1000px'

  2. Lists do not auto size to the size of their data. They must be fullscreen, given a height, or in a vbox layout with flex. You could try calculating the height of the lists and setting it within their respective initialize function (itemHeight * # items in your list). Or you could use a dataview but must set scrollable to null instead of false. You can style it with css.
    https://fiddle.sencha.com/#fiddle/tu

  3. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108
    Answers
    342

    Default

    Lists do not auto size to the size of their data. They must be fullscreen, given a height, or in a vbox layout with flex. You could try calculating the height of the lists and setting it within their respective initialize function (itemHeight * # items in your list). Or you could use a dataview but must set scrollable to null instead of false. You can style it with css.
    https://fiddle.sencha.com/#fiddle/tu
    Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services [email protected]

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

Posting Permissions

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