PDA

View Full Version : Dynamic grid columns shift on row entry



Kaiser_Wilhelm
1 Mar 2012, 8:19 AM
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/#!/example/restful/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
1 Mar 2012, 11:37 AM
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
1 Mar 2012, 12:05 PM
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
1 Mar 2012, 12:07 PM
try adding:


autoScroll: trueto 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.