PDA

View Full Version : Anchor Layout + AutoScroll



oliveira.gabriel07
21 Nov 2011, 11:34 AM
Hi,
I'm trying to use this configs in combination without success.
The example bellow illustrates the issue:

The page have a Panel with autoScroll, anchor layout and a grid as an item.
The GridPanel is loaded by clicking the "Load Grid" button. Because there are to many records, the grid becomes Higher than the panel and a vertical scroll bar is correctly displayed. However, an horizoltal scroll bar is incorrectly displayed as shown in the image.
The two commented lines workaround this problem, but I dont think i should be calling doLayout every time the panel's content is modified.

Is this the expected behavior of the anchor layout? It's not wrong? What should i do?



Ext.onReady(function()
{
var data = [],
MAX_SIZE = 100;

for (var i=0; i<=MAX_SIZE; i++) {
data.push({
id : i,
name: 'value' + ' ' + i.toString()
})
}

var store = new Ext.data.JsonStore({
proxy : new Ext.data.MemoryProxy(data),
fields : [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});

var grid = new Ext.grid.GridPanel({
store : store,
anchor : '0',
autoHeight : true,
border : false,
viewConfig : {
forceFit : true,
scrollOffset: 0
},
columns : [{
dataIndex : 'name',
header : 'Name'
}]
});

new Ext.Viewport({
layout : 'fit',
items : {
xtype : 'panel',
autoScroll : true,
layout : 'anchor',
items : grid,
tbar : [{
text: 'Load Store',
handler: function() {
store.load({
// scope: grid.ownerCt,
// callback: grid.ownerCt.doLayout
});
}]
}
});
});

mitchellsimoens
21 Nov 2011, 12:00 PM
Try anchor: '100%' on your grid.

oliveira.gabriel07
21 Nov 2011, 12:25 PM
Changing anchor from "0" to "100%" didn't worked. There is a difference between using one or the other?