1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    45
    Vote Rating
    4
    AdamMarshall is on a distinguished road

      1  

    Default Display a formpanel underneath a list, without fixing the height of the list

    Display a formpanel underneath a list, without fixing the height of the list


    Hi all,

    I am new to Sencha Touch so apologies in advance, I have been unable to find a solution to my issue.

    I would like to have a panel containing two items, a list and a form. The list can vary in height. The form (just a bunch of buttons) can also vary in height. What I'd like to do is have the list appear on top, then when that is finished the form should appear.

    If I set layout to 'fit' then the list doesn't appear at all. My understanding is that if layout is 'fit' it fills the whole panel and you only see one item at a time?
    If I set layout to 'vbox' this is closer, but I have to set a 'flex' value for the list and the form (or in the 'defaults' part) which fixes the height.

    From the documentation it looks like the default layout 'auto' would do the trick, but nothing appears in this scenario.

    I notice that two of the example apps, GeoCongress and O'Reilly, both have similar layouts with lists alongside other elements and they are all fixed heights

    Any ideas?
    Thanks,
    Adam

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    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


    Quote Originally Posted by AdamMarshall View Post
    If I set layout to 'fit' then the list doesn't appear at all. My understanding is that if layout is 'fit' it fills the whole panel and you only see one item at a time?
    If I set layout to 'vbox' this is closer, but I have to set a 'flex' value for the list and the form (or in the 'defaults' part) which fixes the height.
    Layouts handle child items where you are thinking backwards. If the panel has fit layout, it will fit a single child item to it's dimensions.

    Quote Originally Posted by AdamMarshall View Post
    From the documentation it looks like the default layout 'auto' would do the trick, but nothing appears in this scenario.
    Auto layout doesn't really do much, it won't handle sizing and if you have a list you need to use a layout or set some static size.

    Here is an example having a panel at the end of a list:

    Code:
    Ext.Viewport.add({
        xtype   : 'list',
        itemTpl : '{foo}',
        store   : {
            fields : ['foo'],
            data   : [
                { foo : 1  },
                { foo : 2  },
                { foo : 3  },
                { foo : 4  },
                { foo : 5  },
                { foo : 6  },
                { foo : 7  },
                { foo : 8  },
                { foo : 9  },
                { foo : 10 },
                { foo : 11 },
                { foo : 12 },
                { foo : 13 },
                { foo : 14 },
                { foo : 15 },
                { foo : 16 },
                { foo : 17 },
                { foo : 18 },
                { foo : 19 },
                { foo : 20 },
                { foo : 21 },
                { foo : 22 },
                { foo : 23 },
                { foo : 24 },
                { foo : 25 },
                { foo : 26 },
                { foo : 27 },
                { foo : 28 },
                { foo : 29 },
                { foo : 30 }
            ]
        },
        items : [
            {
                xtype      : 'panel',
                docked     : 'bottom',
                scrollDock : 'bottom',
                items      : [
                    {
                        xtype : 'textfield',
                        label : 'Foo'
                    }
                ]
            }
        ]
    });
    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
    Jun 2013
    Posts
    45
    Vote Rating
    4
    AdamMarshall is on a distinguished road

      1  

    Default


    Hi,

    Thanks for the response.

    In my own environment, I had a Panel, containing two items, a List and a FormPanel.

    Setting 'docked' and 'scrollDock' on the FormPanel, didn't work. Nothing appeared.

    If I changed the FormPanel to a Panel, as in your response, this resulted in my buttons Panel appearing at the top of the screen with no List visible at all. Even when I added items to the List, the List never appeared.

    If I then removed the main parent Panel, so defining the view with extend 'Ext.List' with the List config properties set, and buttons Panel in the items: [] array on the List.

    So

    Code:
    Ext.define('...', {
        extend: 'Ext.List',
        ...
        config: {
            ...
            items: [
                {
                     xtype: 'panel',
                     docked: 'bottom',
                     scrollDock: 'bottom'
                     ...
                 }
            ]
        }
    }
    This results in the List appearing, and the Panel being docked to the very bottom.

    This is preferable to having a 'vbox', setting the List and Panel to 'flex: 1' each and having them fixed heights.

    I was wondering if there was a way to just have a list, and then a panel directly below it. So if the list is empty, the panel appears right below it. If the list is full, the panel appears completely offscreen and can only be seen by scrolling to the bottom of the list.

    In this current version, if I had, for example, 10 buttons in the Panel, on a mobile device this would build upwards from the bottom, overlapping the entire List.

    Does this make sense? I've tried to do a Sencha Fiddle to illustrate but cannot get anything to work.

    This is the closest I have managed to get though so thank you

  4. #4
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    1
    tavojavi is on a distinguished road

      0  

    Default I´m trying to do something similar with out success :S

    I´m trying to do something similar with out success :S


    Hello, I need to do something similar.. and I cannot use docking, because it will use part of the mobile screen and I want to avoid having a fixed panel on it...

    let´s say, we would like to have a container with a user profile:

    +Container (vertical scroll, as it was only one component, despite it has child)
    ¡
    ¡---User Bio (Picture, social network icons, description, etc...)
    ¡---List of books the user read (no scroll on the list, the scroll is on the container)

    what we want to achieve is to have a vertical scroll on the Container" rather than applying a flex on the child components...

    this way, the bio and list of book can scroll all together...

    how can this configuration be done??

    I´m about to start using Xtemplates, but I think this is not the best option, I´ll loose all the power of sencha doing this and I don´t want it.. I´ll rather choose another framework if I cannot use built-in components.

    I´ll appreciate your advices.

    Regards!
    Gustavo

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Posts
    45
    Vote Rating
    4
    AdamMarshall is on a distinguished road

      0  

    Default


    Any ideas?

    My impression is that Sencha Touch is great as long as you don't want to deviate too far from the examples provided, and that anything more flexible is difficult or impossible to achieve. Also, it seems the forums are fairly quiet.

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    22
    Vote Rating
    1
    tavojavi is on a distinguished road

      0  

    Default Here are more fuel to think...

    Here are more fuel to think...


    I´ve seen several questions like this one on the forum, Where people would like use a list mixed with other kind of container on top of it or at the bottom.

    Here is where sencha does not provide any way to do it:
    1) If you use a container with a VBOX layout, you need to setup FLEX properties on the child list + panel, that will split your cellphone screen and make one scroll per child, one for the panel, one for the list. we tried this approach, and it is not very user friendly.

    2) When I put the panel + list, using default layout, WITHOUT scrolling on any element. I can see what I want, the panel, and right after it, the list, but obviously.. there is no scroll that the user can use to see the other items on the list :S :S :S

    4) Docking the panel... this will cause a similar effect to the flex, having half of the screen freezed with a static content, and a little of space to scroll the list...

    3) We can try to use Xtemplate, but we will lost all the features of the components...

    at the end, there is no easy and functional way to have a canvas with scroll where you can put a list and other elements... We would like to have the same behavior like the FROMS control.. you put the Form Container.. then you add child Form elements... it works! magic!!... but youcannot put a list on a form container :S

    I´ve been researching, it seems like in sencha 1, there was a layout called "auto" or something like that, that potentially could create the behavior we want...

    We will appreciate if any sencha dev can provide an insight, so we can learn and make real-world apps with Sencha.

    Best regards, and thanks for your help!