Dynamic grid columns shift on row entry

[Kaiser_Wilhelm]

Hello,
So I have a problem right now where I have a grid that lets the user fill out a form and add it to the grid. The problem occurs when the number of rows is bigger than the grid size. When this happens, the column that has the "flex" attribute is shifted off and all the records fly to the left. I copy and pasted the example here http://docs.sencha.com/ext-js/4-0/#!...l/restful.html and I still got the same results. Is there a bug in earlier 4.x versions and the example is up to date? or could it be the container that is holding my grid? this is my container:

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
});


var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [ gridColumns['grid'] ],
border: true,
enableColumnResize: false,
enableColumnMove: false,
height: 200,
frame: true,
tbar: [
{
text: 'Add Row',
handler : function() {
rowEditing.cancelEdit();


var r = Ext.create('group_model', {
group: 'Group',
instrument: 'Instruments',
minute: 1
});


store.insert(0, r);
rowEditing.startEdit(0, 0);
}
},
'-',
{
itemId: 'removeRow',
text: 'Remove Row',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
},
'->',
createSingleDate(),
'-',
createLoadButton()
],
bbar: [
{
xtype: 'button',
id: 'remove_all_button',
text : 'Remove All Rows',
disabled: true,
handler: function() {
store.removeAll();
}
}
],
plugins: [rowEditing],
listeners: {
'selectionchange': function(view, records) {
grid.down('#removeRow').setDisabled(!records.length);

if(!records.length)
{
Ext.getCmp('remove_all_button').disable();
Ext.getCmp('load_button').disable();
}
else
{
Ext.getCmp('remove_all_button').enable();
Ext.getCmp('load_button').enable();
}
}
}
});

var panel = Ext.create('Ext.Panel', {
border: false,
items: [
grid
]
});


var tabs = Ext.create('Ext.tab.Panel', {
id: 'tab_panel',
bodyStyle: 'padding: 5px',
items: [
{
title: '',
id: 'tab',
items: panel
}
]
});


displayPanel = new Ext.Panel ({
renderTo : 'box_main',
id: 'display_panel',
border: false,
width: 1000,
items: tabs
});

[Kaiser_Wilhelm]

Okay so I got this to work but only after I moved the grid into the same JS file that my containers were in. I had it originally in a seperate JS file and loaded that file first. Any idea why having it in the same file as the containers would make it work?

[Farish]

it shouldnt matter if you have code split in multiple files. However, the grid should be defined when you use it in the items of the panel. What you could try is to add the grid to the panel after creating the grid and not when the panel is created. have no idea about your original problem though.

[Farish]

try adding:

autoScroll: true

to your grid. This will make scrollbars appear when there are more records than the height of the grid. It defaults to false according to the API docs.