vbox layout incompatible with autoScroll ?

[johnrembo]

Hi,

I need vbox layout in a Panel for it's stretch feature.
Unfortunately - panel with vbox layout can't have autoScroll (not sure if it's a bug or my fault)



Ext.onReady(function(){

var data = [
[0,1,2]
];

var store = new Ext.data.ArrayStore({
fields: [
{name: 'A'},{name: 'B'},{name: 'C'}
]
});

var store2 = new Ext.data.ArrayStore({
fields: [
{name: 'A'},{name: 'B'},{name: 'C'}
]
});

store.loadData(data);
store2.loadData(data);

var GR = Ext.extend(Ext.grid.GridPanel, {
columns: [
{header: 'A', dataIndex: 'A'},
{header: 'B', dataIndex: 'B'},
{header: 'C', dataIndex: 'C'}
],
stripeRows: true,
autoHeight:true,
width: 300,
viewConfig: {
forceFit: true,
scrollOffset: 0
}
});

var grid=new GR({
title: 'grid#1',
store:store,
tools:[{
id:'plus',
qtip:'Add new record',
handler:function(e,tool,panel) {
var theData = Ext.data.Record.create([{name: 'A'}, {name: 'B'}, {name: 'C'}]);

var e = new theData({A:'', B:'', C:''});

store.add(e);

Ext.getCmp('panel').doLayout();
}
}]
});

var grid2=new GR({
title: 'grid#2',
margins: '5 0 5 0',
store:store2
});

var panel=new Ext.Panel({
id:'panel',
title:'Multiple grids in vbox',
width:400,
height:300,
padding:5,
autoScroll:true,
layout:'vbox',
defaults:{
flex:0
},
layoutConfig: {
align:'stretch'
},
items:[grid,grid2]
});

panel.renderTo('example');
});



http://img689.imageshack.us/img689/3047/vbox.gif
(pressing "+" once will enable scrollbar if layout:'fit' is used, but not for layout:'vbox')

thanks for your comments

[Condor]

VBox doesn't support autoScroll:true.

You want:

autoScroll: true,
layout: 'anchor',
defaults: {anchor: '-20'}
(the -20 is to save room for the scrollbar)