View Full Version : Content in Border-Layout moves up on click

27 Oct 2011, 12:51 AM
I've created a Borderlayout with region west and center.
Region West contains a Tree and Region Center a Grid.

The Grid has a empty Store which load Records from a Contentstore after clicking on a Treeitem.
This all works fine, but if i click on a Grid-Item, the Grid-container moves up (round-a-bout 20px up)

The Treepanel will be created by this code.

var cent= Ext.create('Ext.tree.Panel', { width: 300,
store: store,
border: false,
autoScroll: true,
layout: 'fit',
rootVisible: false,
listeners: {

itemclick: {
fn: function(view, record, item, index, event) {
nodeId = record.data.id;
var user = cstore.findRecord("id", nodeId);
if(user) {
var Xstore_data = user.products();
the_grid.getStore().loadRecords(Xstore_data.getRange(0,Xstore_data.getCount()),{addRecords: false});
} else {
the_grid.getStore().loadRecords(Xstore2.getRange(0,Xstore2.getCount()),{addRecords: false});


On Itemclick the GridStore will load the new Content

The Grid will be created with this code:

var the_grid = Ext.create('Ext.grid.Panel', { store: Xstore,
layout: 'fit',
region: 'center',
autoScroll: true,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'ID', dataIndex: 'id', flex: 1 }

The Code to create the Layout is, it contains the above elements as items:

var border_layout = Ext.create('Ext.panel.Panel', { autoScroll: false,
height: 400,
layout: 'border',
items: [the_grid,cent],
renderTo: 'cccore'

Those anyone now this problem?
The following image is after a tree-element was clicked , the grid has received the new Products and the layout looks fine

The following Image shows the layout after clicking on a grid element. As we can see the grid and the tree moved up