PDA

View Full Version : Grid Panel columns are not aligned



oneofakind007
7 Oct 2012, 6:21 PM
Hey Community,

first day of the week and problems are rising. Anyway, I need your help. My grid panel is not aligned properly if I load 20+ rows. Any ideas on why is this behaving this way?

39208

Here is a snippet of my code:

How I made my grid panel:


var storeFields = Schedule.Calendar.panels.CallbackPanel.getDates(2);
storeFields.unshift('time');

Ext.define('CallbackModel', {
extend: 'Ext.data.Model',
fields: storeFields
});

var callbackdata = Ext.create('Ext.data.Store', {
storeId:'callback-data',
model: 'CallbackModel',
data: Ext.create('Schedule.Calendar.data.CallbackData'),
//autoLoad : true,
//pageSize: 20,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

callbackdata.load({
params:{
start:0,
limit: 10
}
});

var cm = Schedule.Calendar.panels.CallbackPanel.getDates(1);
cm.unshift({ header: 'Time', dataIndex: 'time', width: 100, sortable: false});

this.callbackTable = Ext.create('Ext.grid.Panel', {
id: 'callback-table',
store: callbackdata,
columns: cm,
stripeRows : true,
autoScroll: true,
columnLines: true,
listeners:{
cellclick:
function(table, td, columnIndex, record, tr, rowIndex, e) {
me.active_column = columnIndex;
},
itemclick:
function(grid, record, item, index, event){
me.active_time = record.get('time');
}
},
dockedItems : [ {
xtype : 'pagingtoolbar',
hight : 28,
store: callbackdata,
displayInfo : true,
dock : 'bottom'
}],
x: 0,
y: 0,
width: 1000,
height: 435
});

"Schedule.Calendar.panels.CallbackPanel.getDates(2)" will return a array something like this " ['col-1', 'col-2', 'col-3',...'col-31'] " and that is for the columns.

As for "Schedule.Calendar.panels.CallbackPanel.getDates(1)" will retrun an array something like this


[
{ header: 'Time', dataIndex: 'time', width: 100, sortable: false},
{ header: '1', dataIndex: 'col-1', flex: 1, sortable: false},
{ header: '2', dataIndex: 'col-2', flex: 1, sortable: false}............
{ header: '31', dataIndex: 'col-31', flex: 1, sortable: false}
]


and this is my initial data:



var myData = {'items' : [
{'time': '0:00'},
{'time': '0:30'},
{'time': '1:00'},
{'time': '1:30'},
{'time': '2:00'},
{'time': '2:30'},
{'time': '3:00'},
{'time': '3:30'},
{'time': '4:00'},
...........................,
{'time': '23:30'}
]}


Please help guys. I have no idea why is this happening.

oneofakind007
7 Oct 2012, 10:06 PM
Now I have two tables with the same behavior. I just loaded many rows and the columns just get destroyed.

Any ideas on this guys? Please help.

oneofakind007
8 Oct 2012, 12:48 AM
I have noticed that it not about the amount of data I load. It becomes unaligned if the vertical scroll bar appears. What is wrong with this? any idea on how to fix this?

Please Help.

metalinspired
8 Oct 2012, 1:18 AM
You have a typo in dockedItems.
hight should be height :)
If data is disappearing it might be wrongly configured pager, most probably on server-side.
As for disaligement I have no clue :S

oneofakind007
8 Oct 2012, 6:44 AM
I was editing my code and removed the dockedItems and worked fine but still the alignment gets destroyed. I saw some post it is because of the scroll bars. How do I the dis-alignment and still use the scroll bar?.

scottmartin
8 Oct 2012, 7:29 AM
What version of Ext4 are you using? Please use 4.1+ if possible as 4.07 had many issues with alignment.

Scott.

oneofakind007
8 Oct 2012, 4:26 PM
Yup im using 4.0.7. Okay let me try 4.1

But, has anyone exprienced the same thing?