Ext JS日历面板无法显示事件数据的问题求助

我帮你排查了下，你的Ext JS日历面板不显示事件主要有几个关键问题，咱们一步步来解决：

1. 数据结构不匹配 #

Ext JS的日历事件Store默认期望事件数据的根节点是events，但你的Ajax返回的根节点是Data，这会导致Store无法正确解析数据。

2. Store配置缺失Reader #

你需要在Store的Proxy中添加reader配置，明确指定数据的根节点，同时确保字段映射正确。

3. AutoLoad设置问题 #

你把autoLoad设为了false，这意味着Store不会自动加载数据，除非你手动调用store.load()。如果希望页面加载时就获取事件，建议改成true。

修改后的Store配置 #

store: {
    autoLoad: true, // 改为true自动加载数据
    proxy: {
        type: 'ajax',
        url: 'calendar.ext',
        reader: {
            type: 'json',
            rootProperty: 'Data' // 对应返回数据中的根节点
        }
    },
    // 可选：如果字段名称有差异，可配置model字段映射，你的字段名称基本符合默认，也可以按需添加
    fields: [
        { name: 'id', type: 'string' },
        { name: 'calendarId', type: 'int' },
        { name: 'title', type: 'string' },
        { name: 'startDate', type: 'date', dateFormat: 'c' }, // 自动解析ISO8601格式的日期带时区
        { name: 'endDate', type: 'date', dateFormat: 'c' },
        { name: 'allDay', type: 'boolean' }
    ]
}

4. 时区处理（可选） #

你的日历设置了timezoneOffset: 0，但返回的事件数据包含时区偏移-05:00。如果希望事件显示正确的本地时间，建议去掉timezoneOffset配置，让Ext JS自动处理时区，或者确保Store的日期字段解析时正确处理时区。

测试内存数据的方法 #

如果你想先通过内存数据测试日历是否能正常显示事件，可以直接给Store设置data属性，比如：

store: {
    data: {
        "Data": [
            {
                "id": "153_0",
                "calendarId": 47,
                "title": "BELC21 > 153 > Mango",
                "startDate": "2016-08-19T00:00:00-05:00",
                "endDate": "2016-08-31T00:00:00-05:00",
                "allDay": true
            }
        ]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'Data'
        }
    }
}

这样修改后，你的日历应该就能正确显示事件了。如果还有问题，可以检查浏览器控制台是否有报错信息，比如字段类型不匹配或者Store加载失败的提示。

内容的提问来源于stack exchange，提问作者Buddha