1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    8
    Vote Rating
    0
    oneofakind007 is on a distinguished road

      0  

    Default Unanswered: Grid Panel columns are not aligned

    Unanswered: Grid Panel columns are not aligned


    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:
    Code:
         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
    Code:
    [
    { 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:

    Code:
    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.
    Last edited by oneofakind007; 7 Oct 2012 at 6:26 PM. Reason: forgot to show my initial data -- screenshot

  2. #2
    Sencha User
    Join Date
    Sep 2012
    Posts
    8
    Vote Rating
    0
    oneofakind007 is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    8
    Vote Rating
    0
    oneofakind007 is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User metalinspired's Avatar
    Join Date
    Apr 2012
    Posts
    98
    Answers
    4
    Vote Rating
    4
    metalinspired is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    8
    Vote Rating
    0
    oneofakind007 is on a distinguished road

      0  

    Default


    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?.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Answers
    653
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    8
    Vote Rating
    0
    oneofakind007 is on a distinguished road

      0  

    Default


    Yup im using 4.0.7. Okay let me try 4.1

    But, has anyone exprienced the same thing?