PDA

View Full Version : border layout inside of a card of a tab/card layout



lukepatrick
4 Sep 2013, 2:00 PM
I'm trying to combine a border layout within a card of a card/tab layout, whenever that card is viewed I get the ominous "Layout run failed"
Below is a code sample, taking from the card example and combining with a border example


Ext.require(['*']);
Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport', {
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
split : true
},
items : [{
id : 'designcards',
//layout : 'card',
xtype : 'tabpanel',
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
height : 40,
style : 'background:transparent',
border : 0,
padding : '0 2 0 2',
items : [{
id : 'move-prev',
text : 'Back',
handler : function(btn) {
var layout = btn.up("panel").getLayout();
layout["prev"]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
},
disabled : true
}, '->', // greedy spacer so that the buttons are aligned to each side
{
id : 'move-next',
text : 'Next',
handler : function(btn) {
var layout = btn.up("panel").getLayout();
layout["next"]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
}
}]
}],
items : [{
id : 'card-0',
html : '<h1>Card Stack</h1><p>Step 1 of 3</p>'
}, {
id : 'card-1',
html : '<h1>Card Stack</h1><p>Step 2 of 3</p>'
}, {
id : 'card-2',
layout : 'border',
items : [{
region : 'center',
id : 'centerReg',
html : 'north'
}]
}]
}]
});
});

evant
4 Sep 2013, 2:16 PM
You need to give the tab panel a height, either:



// configured
height: 400

// calculated:
flex: 1


Alternatively, switch the layout on the viewport to 'fit', since there's not much point to using a vbox with a single item.

lukepatrick
4 Sep 2013, 2:26 PM
yes, you are on the right track. I experimented and tried all the layout types (vbox, fit, etc..), fit was the only one that worked
e.g.

Ext.require(['*']);

Ext.onReady(function() {
var viewport = Ext.create('Ext.Viewport', {
layout : 'fit',
items : [{
id : 'designcards',
//layout : 'card',
xtype : 'tabpanel',
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
height : 40,
style : 'background:transparent',
border : 0,
padding : '0 2 0 2',
items : [{
id : 'move-prev',
text : 'Back',
handler : function(btn) {
var layout = btn.up("panel").getLayout();
layout["prev"]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
},
disabled : true
}, '->', // greedy spacer so that the buttons are aligned to each side
{
id : 'move-next',
text : 'Next',
handler : function(btn) {
var layout = btn.up("panel").getLayout();
layout["next"]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
}
}]
}],
items : [{
id : 'card-0',
html : '<h1>Card Stack</h1><p>Step 1 of 3</p>'
}, {
id : 'card-1',
html : '<h1>Card Stack</h1><p>Step 2 of 3</p>'
}, {
id : 'card-2',
layout : 'border',
items : [{
region : 'center',
id : 'centerReg',
html : 'center'
}]
}]
}]
});
});