1. #1
    Sencha User
    Join Date
    Aug 2013
    Posts
    8
    Vote Rating
    0
    Answers
    1
    akucher is on a distinguished road

      0  

    Default Answered: Set height of list to prevent t srcollable

    Answered: Set height of list to prevent t srcollable


    Hello.

    Look at the code:
    Code:
    var panel = Ext.create('Ext.Panel', {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
        defaults: {
            xtype: 'list',
            itemTpl: '{title}',
            scrollable: false,
            flex: 1,
            data: [
                { title: 'Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 4' }
            ]
        },
        items: [
            {},
            {}
        ]
    });
    I need to see all items here, but if my list has too many items, then it hidden by another list or end of panel.
    So, my idea is show two (or more) list in one panel in vbox manner and make scrollable panel instead lists (if i scroll then I should see all (even 100 items) items of first list, then items of second one).

    I see the problem is list can't set height itself by listitems. I've try several solutions, but unsuccessfully.
    I also tried recalculate list height by list items, but if I have multistring items (like 1st item in example), then height of item has been changed and I can't get actually height of item.
    How can I accomplish it?
    And it well be really cool if you can add this feature in future.

  2. Another option is to use a dataview. When scrollable: null it will dynamically size itself. You can try to apply styling to the dataview to make it look like a list. I haven't done this personally but would start by looking at the differences in the cls configs that the 2 classes use.

  3. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    Answers
    335
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    Another option is to use a dataview. When scrollable: null it will dynamically size itself. You can try to apply styling to the dataview to make it look like a list. I haven't done this personally but would start by looking at the differences in the cls configs that the 2 classes use.
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

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

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

  4. #3
    Sencha User
    Join Date
    Aug 2013
    Posts
    8
    Vote Rating
    0
    Answers
    1
    akucher is on a distinguished road

      0  

    Default


    Thanks, this works
    Code:
    var panel = Ext.create('Ext.Panel', {
        fullscreen: true,
        layout: 'vbox',
        scrollable: true,
        defaults: {
            xtype: 'dataview',
            itemTpl: '{title}',
            scrollable: null,
            //flex: 1,
            data: [
                { title: 'Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1' },
                { title: 'Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1' },
                { title: 'Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1' },
                { title: 'Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1Item 1' },
                { title: 'Item 2' },
                { title: 'Item 3' },
                { title: 'Item 4' }
            ]
        },
        items: [
            {},
            {}
        ]
    });

Thread Participants: 1