PDA

View Full Version : viewport with vbox layout



adeelmahmood
30 Aug 2012, 9:37 AM
I am trying to show a grid on a page with a toolbar immediately below the grid but I dont want to use the dockedItems .. instead i want to add a second component (toolbar) to the viewport and have that show up after the grid .. so i am using vbox layout but for some reason if i set the grid to forceFit: true then the grid disappears and only the bottom toolbar shows up .. but if i remove the forceFit:true then both show up but obviously the grid is not taking the full space available on the page ..

friend
30 Aug 2012, 11:08 AM
It sounds like a fairly simple layout issue, but it's hard to say without seeing your code. Can you post a concise code sample which includes your Viewport/Grid/Toolbar layout?

Thx.

scottmartin
30 Aug 2012, 2:30 PM
I put this together real quick in Sencha Architect:



Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
align: 'stretch',
type: 'vbox'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
viewConfig: {

}
},
{
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'MyButton'
}
]
}
]
});

me.callParent(arguments);
}

});

Ext.create('MyApp.view.MyViewport', {});


Scott.