Bucs
7 Dec 2010, 6:32 AM
I am trying to launch a simple viewport component that has a card layout, and I cannot for the life of me figure out why any of the items in the items collection will not show up, but the dockedItems do. Won't the card layout default to the first card? I had the items and dockedItems in an Ext.apply({)} function in initComponent but that didn't work either. I have also tried putting layout: {type: 'vbox', align: 'stretch'} on the cards thinking they need layouts too, and this will make them show up, but only if I remove the viewport's layout: 'card'. As soon as I set the viewport's layout to 'card', the items disappear. I know only one can appear at a time with card, but stumped as to why the first one also disappears.
Really, REALLY appreciate some help here and would love someone to school me on exactly what concept(s) I am missing here.
I have a launch function that looks like the following:
Ext.regApplication({
name : 'myApp',
defaultTarget: "viewport",
......
launch: function() {
this.viewport = new myApp.Viewport({
application: this
});
}
});
And this is supposed to launch a the following viewport component....but all that appears is the dockedItems, why won't the first card in the items collection appear by default? Do I need another layout somewhere? I am totally confused.
mmEngine.Viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
fullscreen: true,
layout: 'card',
items: [
{
xtype: 'panel',
html: 'card1',
style: 'background-color: #f2f2f2',
height: 100
},
{
xtype: 'panel',
html: 'card2',
style: 'background-color: #f6f6f6',
scroll: 'vertical'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Titlebar'
},
{
dock : 'top',
xtype: 'toolbar',
ui : 'light',
items: [
{
text: 'Test Button'
}
]
}
],
initComponent: function() {
mmEngine.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Really, REALLY appreciate some help here and would love someone to school me on exactly what concept(s) I am missing here.
I have a launch function that looks like the following:
Ext.regApplication({
name : 'myApp',
defaultTarget: "viewport",
......
launch: function() {
this.viewport = new myApp.Viewport({
application: this
});
}
});
And this is supposed to launch a the following viewport component....but all that appears is the dockedItems, why won't the first card in the items collection appear by default? Do I need another layout somewhere? I am totally confused.
mmEngine.Viewport = Ext.extend(Ext.Panel, {
id : 'viewport',
fullscreen: true,
layout: 'card',
items: [
{
xtype: 'panel',
html: 'card1',
style: 'background-color: #f2f2f2',
height: 100
},
{
xtype: 'panel',
html: 'card2',
style: 'background-color: #f6f6f6',
scroll: 'vertical'
}
],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Titlebar'
},
{
dock : 'top',
xtype: 'toolbar',
ui : 'light',
items: [
{
text: 'Test Button'
}
]
}
],
initComponent: function() {
mmEngine.Viewport.superclass.initComponent.apply(this, arguments);
}
});