Question

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

enter image description here

其次，请参阅第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.

Answer 1

对于那些不清楚代码的人来说，这又是一次。有一些变化。

关于我如何创建网格面板的代码：

var me = this;

    // JSON SAMPLE
    var storeFields = Schedule.Calendar.panels.CallbackPanel.getDates(2);
    storeFields.unshift('time');
    Ext.define('MyModel', {
        extend: 'Ext.data.Model',
        fields: storeFields
    });

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

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

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

    var MyTable= Ext.create('Ext.grid.Panel', {
        id: 'myTable',
        store: Ext.data.StoreManager.lookup('callback-data'),
        columns: cm,
        stripeRows : true,
        autoScroll: true,
        columnLines: true,
        listeners:{
            cellclick:
            function(table, td, columnIndex, record, tr, rowIndex, e)  {
                me.active_column = columnIndex;
                me.active_time = record.get('time');
                me.cellContent = record.get('col-'+columnIndex);
                //console.debug(record.get('col-'+columnIndex));
                //console.debug(columnIndex);
            }
        },
        dockedItems : [ {
            xtype : 'pagingtoolbar',
            hight : 28,
            store: callbackdata,
            displayInfo : true,
            dock : 'bottom'
        }],
        x: 0,
        y: 0,
        width: 1000,
        height: 435
    });

    return myTable;

“Schedule.Calendar.panels.CallbackPanel.getDates（2）”将返回一个类似于“['col-1'，'col-2'，'col-3'，...'col-的数组31']“，这是列。

至于“Schedule.Calendar.panels.CallbackPanel.getDates（1）”将返回一个类似这样的数组：

 [
     { 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}
 ]

这就是我的商店加载的内容：

  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'}
  ]}

希望有所帮助，因为我真的需要帮助。谢谢你的回复。

EXTjs：网格面板问题 - 列对齐和加载数据

1 个答案: