0

我看到了一些类似于我的问题的帖子，但解决方案与我的不一致。首先是网格面板中的列未正确对齐。

在此处输入图像描述

其次，看到第1列没有数据？这是我的制作方法：

// 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
});

我正在使用可扩展日历http://ext.ensible.com，据我所知，我没有包含任何 css 文件。

这是我的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>

这是我的简单数据： - 它只接受到上午 9:30。如果我在 9:30 及以下注释掉它可以正常工作，否则对齐会变得疯狂。

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;

},

问候， Ronel C.

4

0 回答 0