View Full Version : packed layout and dockedItems

13 Oct 2011, 8:18 AM
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...

layout: { type:'vbox',

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)

13 Oct 2011, 8:37 AM
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.

19 Oct 2011, 12:40 PM
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.


here's the source:

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 );

19 Oct 2011, 1:11 PM
I discovered that the attribute that you want to use is

docked: 'top'

19 Oct 2011, 2:30 PM
damn, you are right.

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

Jamie Avins
25 Oct 2011, 3:30 PM
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.