Viewport not correctly shown

[bagusflyer]

Have 2 problem: (I set autoCreateViewport to true at my app.js)

1. If I use dockedItems, then the toolbar won't be shown at all. The screen is totally blank



Ext.define('App.view.Viewport', {
extend : 'Ext.Panel',
xtype : 'app-viewport',
config : {
fullscreen : true,
layout : 'card',
dockedItems:
[{
docked: 'top',
xtype:'toolbar',
itemId:'toolbar',
title:APPNAME,
items:
[{
ui:'action',
itemId:LEFTBTN,
},
{ xtype: 'spacer' },
{
ui:'action',
itemId:RIGHTBTN,
}],
}]
}
});


2. If I used Items, then the toolbar title is not in middle



Ext.define('App.view.Viewport', {
extend : 'Ext.Panel',
xtype : 'app-viewport',
config : {
fullscreen : true,
layout : 'card',
items:
[{
xtype : 'toolbar',
docked : 'top',
title : 'ViewPort',
items :
[{
text : 'Back',
ui : 'action',
itemId : LEFTBTN,
// hidden : true
},{xtype:'spacer'},
{
text : 'Back',
ui : 'action',
itemId : RIGHTBTN,
// hidden : true
}]
}]
}
});


Here is the screen shot:

30347

What's wrong with it? Can anybody help? Thanks

[mitchellsimoens]

Try using the TitleBar instead:


Ext.define('App.view.Viewport', {
extend : 'Ext.Panel',
xtype : 'app-viewport',
config : {
fullscreen : true,
layout : 'card',
dockedItems:
[{
docked: 'top',
xtype:'titlebar',
itemId:'toolbar',
title:APPNAME,
items:
[{
ui:'action',
itemId:LEFTBTN,
align: 'left'
},
{
ui:'action',
itemId:RIGHTBTN,
align: 'right'
}],
}]
}
});

Notice the new xtype that replaced toolbar and the align config on the buttons. And the removed spacer.

[bagusflyer]

Thanks.I'll try that.

[bagusflyer]

I did two test:

1. I changed the items to dockedItmes and changed the xtype to 'titlebar', still blank screen

2. I changed back dockedItems to items and xtype to 'navigationbar', everything works fine. The alignment is also correct.

But according to the document, the navigationbar is private, can I use it?

[bagusflyer]

Can I use navigationbar?

[mitchellsimoens]

Sorry, didn't notice you were using dockedItems. All you docked components should live within the items array:


Ext.define('App.view.Viewport', {
extend : 'Ext.Panel',
xtype : 'app-viewport',
config : {
fullscreen : true,
layout : 'card',
items : [
{
xtype : 'titlebar',
docked : 'top',
itemId : 'toolbar',
title : APPNAME,
items : [
{
ui : 'action',
itemId : LEFTBTN,
align : 'left'
},
{
ui : 'action',
itemId : RIGHTBTN,
align : 'right'
}
]
}
]
}
});

[bagusflyer]

Works too. Thanks. Mitchell, you're the best.