1. #1
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Vote Rating
    2
    NickT is on a distinguished road

      0  

    Default packed layout and dockedItems

    packed layout and dockedItems


    Hello,
    In 1.1, i have a variety of cards that contained their own unique toolbar, or dockedItems. In 2.0, the dockedItems are deprecated, in lieu of simply adding them to the items collection.

    Behaviorally, this causes a different effect when using pack, most specifically in a layout declaration...

    Code:
            layout: {            type:'vbox',
                align:'center'
                ,pack:'center'
            },
    because now, the toolbar is impacted by the layout config whereas before, it was isolated. So, in the past I could have the toolbar ride along the top of the screen, for instance, but in 2.0, it visually attaches to the card item collection and not the full screen.

    Would you recommend usage of a single toolbar on the viewport, if we want to guarantee that it always aligns along the top of screen? or would you recommend device specific layout configurations to accomplish the visual effect of a top/bottom toolbar associating with the screen height and not the card item collection height?

    (in 1.1, the toolbar was along the top of screen because it was isolated from the packed item collection)
    Screen shot 2011-10-13 at 9.16.34 AM.jpg

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Did you set dock: 'top' on your toolbar? If you put a docked item in the items collection and give it a dock value, it shouldn't be impacted by the layout of the container.

  3. #3
    Sencha User
    Join Date
    Jan 2009
    Location
    West Coast
    Posts
    37
    Vote Rating
    0
    slchorne is on a distinguished road

      0  

    Default layout seems to fight the docked items.

    layout seems to fight the docked items.


    I have the same problem with the 2.0.0-pr1 build.

    If you have a 'hbox' layout, docked items (like toolbars) don't render correctly.
    See the attached screenshots before and after with the layout line commented out.

    panel-with-vbox.jpgpanel-no-layout.jpeg

    here's the source:

    Code:
    Ext.application({
        name: 'BoxOffice',
        launch: function() {
    
            var P = Ext.create('Ext.Panel',{
                //layout: 'hbox',
                items: [
                    {
                        xtype: 'toolbar',
                        title: 'header toolbar',
                        dock: 'top'
                    },
                    {
                        xtype: 'panel',
                        html: "Left side panel",
                        flex: 1
                    },
                    {
                        xtype: 'panel',
                        html: "Right side panel",
                        flex: 1
                    },
                    {
                        xtype: 'toolbar',
                        title: 'Footer toolbar',
                        dock: 'bottom'
                    }
                ]
            });
            Ext.Viewport.add( P );

  4. #4
    Sencha Premium Member
    Join Date
    May 2008
    Location
    Pasadena, California
    Posts
    172
    Vote Rating
    2
    NickT is on a distinguished road

      0  

    Default


    I discovered that the attribute that you want to use is

    docked: 'top'

  5. #5
    Sencha User
    Join Date
    Jan 2009
    Location
    West Coast
    Posts
    37
    Vote Rating
    0
    slchorne is on a distinguished road

      0  

    Default


    damn, you are right.

    the API docs say 'docked' but all the examples and docs still use 'dock'
    I'll open a documentation bug.

  6. #6
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    This is very high on our priority list to fix when we get back. It will be dock, but it hasn't been implemented that way yet. The docs got ahead of the code.