EXTjs: Grid Panel issues - Column Aligment and Loading Data

Question

I saw some post similar to my problem, but the solution are not coinciding with mine. First is that in Grid Panel the columns are not aligned right.

enter image description here

Secondly, see column 1 has no data? Here is how I made it:

// Data Tabe
var storeFields = Schedule.Calendar.panels.CallbackPanel.getDates(true);
storeFields.push('time');
/*
       storeFields will return: [0,0,0,0,.......0,'time']
    */
var callbackdata = Ext.create('Ext.data.ArrayStore', {
    fields: storeFields,
    data: Ext.create('Schedule.Calendar.data.CallbackData')
});

var callbackTable = Ext.create('Ext.grid.Panel', {
    id: 'callback-table',
    store: callbackdata,
    columns: [
        { header: 'Time',  dataIndex: 'time', id: 0},
        Schedule.Calendar.panels.CallbackPanel.getDates(false)
                         //This will return
                       /*
                       {
                       header : 0
                       dataIndex: '1'
                       id: 1
                       },
                       {
                       header : 1
                       dataIndex: '2'
                       id: 2
                       }
                       .
                       .
                       .
                       up to 30
                       */
    ],
    stripeRows : true,
    autoScroll: true,
    columnLines: true,
    listeners:{
        itemclick:
        function(grid, record, item, index, event){
            active_id = record.get('id');
        }
    },
    x: 0,
    y: 0,
    width: 1000,
    height: 435
});

I am using Extensible Calendar http://ext.ensible.com , as far as I know I have not included any css files.

heres a snippet of my html:

<head>
<title>Extensible : Basic Calendar</title>
<!-- Sets up all Ext and Extensible includes: -->
<script type="text/javascript" src="../Extensible-config.js"></script>

<!-- Page-specific includes -->
<script type="text/javascript" src="basic.js"></script>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
    .sample-ct {      
        height: 500px;
        width: 1000px
        align: 'center'
    }

    .next-button {
        background-image: url("http://localhost/schedule/resources/images/custom/right_arrow.png");
    }
    .prev-button {
        background-image: url("http://localhost/schedule/resources/images/custom/left_arrow.png");
    }

</style>

This my simple data: - it will only accept until 9:30AM. If i comment out 9:30 and below that it works fine, if not the alignment goes crazy.

myJsonData: function() {

    var myData = {'items' : [
                    {'time': '1:00 AM'},
        {'time': '1:30 AM'},
        {'time': '2:00 AM'},
        {'time': '2:30 AM'},
        {'time': '3:00 AM'},
        {'time': '3:30 AM'},
        {'time': '4:00 AM'},
        {'time': '4:30 AM'},
        {'time': '5:00 AM'},
        {'time': '5:30 AM'},
        {'time': '6:00 AM'},
        {'time': '6:30 AM'},
        {'time': '7:00 AM'},
        {'time': '7:30 AM'},
        {'time': '8:00 AM'},
        {'time': '8:30 AM'},
        {'time': '9:00 AM'},
        {'time': '9:30 AM'},
        {'time': '10:00 AM'},
        {'time': '10:30 AM'},
        {'time': '11:00 AM'},
        {'time': '12:00 NN'},
        {'time': '12:30 NN'},
        {'time': '1:00 PM'},
        {'time': '1:30 PM'},
        {'time': '2:00 PM'},
        {'time': '2:30 PM'},
        {'time': '3:00 PM'},
        {'time': '3:30 PM'},
        {'time': '4:00 PM'},
        {'time': '4:30 PM'},
        {'time': '5:00 PM'},
        {'time': '5:30 PM'},
        {'time': '6:00 PM'},
        {'time': '6:30 PM'},
        {'time': '7:00 PM'},
        {'time': '7:30 PM'},
        {'time': '8:00 PM'},
        {'time': '8:30 PM'},
        {'time': '9:00 PM'},
        {'time': '9:30 PM'},
        {'time': '10:00 PM'},
        {'time': '10:30 PM'},
        {'time': '11:00 PM'},
        {'time': '12:00 MN'},
        {'time': '12:30 MN'}
    ]};

    return myData;

},

Regards, Ronel C.

why do u have ids on your columns? your column definitions are missing commas, your styles are missing semicolons ... — dbrin, Oct 03 '12 at 04:14
that is just an example that this class, " Schedule.Calendar.panels.CallbackPanel.getDates(false)", will return. Just an example for you to see what those classes returns. As for the Id, i dont know why I put there. I might need it later on i guess. Remove it? — oneofakind, Oct 03 '12 at 06:29
I got to align right if the data loaded in the store is just a handful. But, when I load 20+ rows, the GridPanel does not align. is this a bug of extjs4? can someone share a fix? — oneofakind, Oct 05 '12 at 00:20
my data is just a simple Json format. See the post again, I updated my post. Thanks — oneofakind, Oct 05 '12 at 07:53
Hello? any ideas on this? column are still not aligned if data loaded is more than 20 rows. Please help. — oneofakind, Oct 08 '12 at 02:02
you are not providing all of the information. why is your data in the form of '9:00 AM' but the grid shows 9:00. And what exactly is '12:00 NN' ? Is there a model class that expects certain format? NN and MN are not regular time formats. — dbrin, Oct 08 '12 at 04:53
I manually declared the content of the array. This would display as the time column is the only one that has a column. It does display that but the columns are not aligned. Okay let me put on more info. — oneofakind, Oct 08 '12 at 05:30

EXTjs: Grid Panel issues - Column Aligment and Loading Data

0 Answers0