1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    Answers
    2
    martuanez is on a distinguished road

      0  

    Default Answered: Unable to set the right layout

    Answered: Unable to set the right layout


    Hi all, i'm trying to create a container that has four items, and what i need is the container to be the one that scroll instead of each individual item, also i want every item to have it's own height so if the four items are bigger than the screen the user can scroll down through the container to see the other items info...
    My code:
    Code:
    Ext.define('APP.view.DetailsView', {
        xtype: 'DetailsView',
          requires: [ ... ],
    
        extend: 'Ext.Container',
        config: {
            layout: {
                type: 'vbox',
                padding: 3
            },     
            //scrollable: 'vertical',
            items: [
                {
                    //flex: 2,
                    layout: 'fit',
                    scrollable: 'vertical',//or false?
                    xtype: 'dataview', //add xtype
                    itemId: 'detailItem',
                    store: 'DetailsStore',
                    loadingText: 'Loading keys...',
                    emptyText: '<div>No keys found.</div>',
                    onItemDisclosure: false,
                    itemTpl: '{label}{value}',
                    itemCls: 'details-list',
                    selectedItemCls: '',
                    disableSelection: true,
                    pressedCls: ''
                },
                {            
                    height: '100%',
                    //flex: 1,
                    //layout: 'fit',
                    xtype: 'list', //add xtype
                    //scrollable: false,
                    itemId: 'detailKeys',
                    store: 'DetailsKeysStore',
                    loadingText: 'Loading keys...',
                    emptyText: '<div>No keys found.</div>',
                    onItemDisclosure: false,
                    itemTpl: '{label}{value}',
                    itemCls: 'details-list',
                    selectedItemCls: '',
                    disableSelection: true,
                    pressedCls: ''
                },
                {
                
                    height: '100%',
                    //flex: 3,
                    //layout: 'fit',
                    xtype: 'list', //add xtype
                    //scrollable: false,
                    itemId: 'detailuserdefs',
                    store: 'DetailsUserdefsStore',
                    loadingText: 'Loading userdefs...',
                    onItemDisclosure: false,
                    itemTpl: '{label}{value}',
                    itemCls: 'details-list',
                    selectedItemCls: '',
                    disableSelection: true,
                    pressedCls: ''
                },
                {
                    height: '100%',
                    //layout: 'fit',
                    xtype: 'list', 
                    //scrollable: false,
                    itemId: 'detailOthers',
                    store: 'ContactsDetailsOthersStore',
                    loadingText: 'Loading userdefs...',
                    onItemDisclosure: true,
                    itemTpl: '{label}{value}',
                    itemCls: 'details-list'
                }
            ]
        }
    
    
    });
    As you can see i've tried a lot of things...with no success
    Thanks in advance!

  2. I´ve finally make it work, i set scrollable to false in the defaults section of the container and a height on the child items. One thing that happened is that when setting scrollable to false in the childs, not in the defaults, sencha didn't recognize the height, this is a bug that they claim they have fixed already, actual version by the time i'm writting this 2.2, version i'm working on 2.1.1
    Note: I also managed to set dinamic heights on each item, i did this by setting it apart and adding the items later by doing myContainer.add(itemWithDinamicHeight);

    Cheers!

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    1
    Dbms is on a distinguished road

      1  

    Default


    1. Use scrollable: vertical for parent container
    2. Use scrollable: false for all child containers
    3. Remove all flex, since you want to give your own height.
    4. Give height parameter in em. Percentage values have never worked for me when giving in height config.
    5. Remove layout: fit

    If this does not work, kindly specify what went wrong.

  4. #3
    Sencha User
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    Answers
    2
    martuanez is on a distinguished road

      0  

    Default height i tryed

    height i tryed


    I tryed with height, but i have to provide a fix height, don't i? How could i provide the proper height? meaning the natural height the components has...

  5. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    1
    Dbms is on a distinguished road

      0  

    Default


    In that case, what happens if you do not give any height? Does the list not take the height as per records?
    Remove flex and height both.

  6. #5
    Sencha User
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    Answers
    2
    martuanez is on a distinguished road

      0  

    Default


    This is what i have now, with this configuration nothing is shown.. :S
    Code:
    Ext.define('GMME.view.Contacts.ContactsDetailsView', {
    
    
        extend: 'Ext.Container',
        config: {
            layout: {
                type: 'vbox',
                padding: 3
            },        
            scrollable: 'vertical',
            items: [
                {
                    scrollable: false,
                    xtype: 'dataview', //add xtype
                    itemId: 'detailItem',
                    store: 'ContactsDetailsStore',
                    loadingText: 'Loading keys...',
                    emptyText: '<div>No keys found.</div>',
                    onItemDisclosure: false,
                    itemTpl: '{label}{value}',
                    itemCls: 'details-list',
                    selectedItemCls: '',
                    disableSelection: true,
                    pressedCls: ''
                },
                {
                    xtype: 'list',
                    scrollable: false,
                    itemId: 'detailKeys',
                    store: 'ContactsDetailsKeysStore',
                    loadingText: 'Loading keys...',
                    emptyText: '<div>No keys found.</div>',
                    onItemDisclosure: false,
                    itemTpl: '<div class="detail-list-item">{label}</div>{value}',
                    itemCls: 'details-list',
                    selectedItemCls: '',
                    disableSelection: true,
                    pressedCls: ''
                },
                {
                    xtype: 'list', //add xtype
                    scrollable: false,
                    itemId: 'detailuserdefs',
                    store: 'ContactsDetailsUserdefsStore',
                    loadingText: 'Loading userdefs...',
                    onItemDisclosure: false,
                    itemTpl: '<div class="detail-list-item">{label}</div>{value}',
                    itemCls: 'details-list',
                    selectedItemCls: '',
                    disableSelection: true,
                    pressedCls: ''
    
    
                },
                {
                    xtype: 'list',
                    scrollable: false,
                    itemId: 'detailOthers',
                    store: 'ContactsDetailsOthersStore',
                    loadingText: 'Loading userdefs...',
                    onItemDisclosure: true,
                    itemTpl: '{label}{value}',
                    itemCls: 'details-list'
                }
            ]
        }
    
    
    });

  7. #6
    Sencha User
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    Answers
    2
    martuanez is on a distinguished road

      0  

    Default


    Also this message appears if no height is set
    [WARN][Ext.dataview.List#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.

  8. #7
    Sencha User
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    Answers
    2
    martuanez is on a distinguished road

      0  

    Default


    I've created a jsfiddle to address this issue and to provide a better understanding of my code:
    http://jsfiddle.net/martuanez/7GV3b/

  9. #8
    Sencha User
    Join Date
    May 2013
    Posts
    13
    Vote Rating
    0
    Answers
    2
    martuanez is on a distinguished road

      0  

    Default


    I´ve finally make it work, i set scrollable to false in the defaults section of the container and a height on the child items. One thing that happened is that when setting scrollable to false in the childs, not in the defaults, sencha didn't recognize the height, this is a bug that they claim they have fixed already, actual version by the time i'm writting this 2.2, version i'm working on 2.1.1
    Note: I also managed to set dinamic heights on each item, i did this by setting it apart and adding the items later by doing myContainer.add(itemWithDinamicHeight);

    Cheers!

Thread Participants: 1

Tags for this Thread