Grid Panel columns are not aligned

[oneofakind007]

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?

align2.JPG

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]

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]

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]

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]

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]

What version of Ext4 are you using? Please use 4.1+ if possible as 4.07 had many issues with alignment.

Scott.

[oneofakind007]

Yup im using 4.0.7. Okay let me try 4.1

But, has anyone exprienced the same thing?