Extjs 7.0 日历标题未与列对齐答案

【问题标题】：Extjs 7.0 Calendar headers not aligned with columnsExtjs 7.0 日历标题未与列对齐
【发布时间】：2020-08-12 02:30:44
【问题描述】：

使用 Extjs 7.0 中的 Calendar 组件，我们注意到如果语言设置为荷兰语，标题单元格不会与其列正确对齐：

在查看源代码时，我发现了在单元格 html 中添加这些值的位置；在Ext.calendar.header.Base中，setHeaderText函数中存在如下代码：

var me = this,
            D = Ext.Date,
            value = me.getValue(),
            format = me.getFormat(),
            domFormat = me.domFormat,
            cells = me.cells,
            len = cells.length,
            useDates = me.useDates,
            cell, i;

        if (!value) {
            return;
        }

        value = D.clone(value);

        for (i = 0; i < len; ++i) {
            cell = cells[i];

            if (useDates) {
                cell.setAttribute('data-date', D.format(value, domFormat));
            }

            cell.setAttribute('data-day', value.getDay());
            cell.innerHTML = D.format(value, format);
            value = D.add(value, D.DAY, 1);
        }

innerHtml 是通过格式化 Date(D) 对象来设置的，这会产生当天的 3 个字符。如果您将其更改为仅设置一个 4 字符值，例如 cell.innerHTML = 'Test'，则标题排列得很好：

但由于某种原因，这在使用 D.format 值时不起作用。如果有人知道是什么原因造成的，我很想听听。

我似乎无法测试这是否在另一种语言中也出现错误，原因是由于某种原因我的包无法再加载。

【问题讨论】：

标签： extjs localization calendar header extjs7

【解决方案1】：

您可以设置（或修复）本地化覆盖本地化常量。日历使用Ext.Date.dayNames 和Ext.Date.getShortDayName()。

您可以在localization package 中看到的所有常量列表。

Fiddle example

【讨论】：

嗨，谢谢你的例子。我们制作了自己的本地化类，因为我们需要从我们自己的服务器加载翻译，这应该覆盖“Locale”属性。当我在那里更改 dayNames 和 getShortDayName 函数时，我没有注意到有什么不同，所以也许这个覆盖没有做我认为应该做的事情。但是我不确定它的翻译是从哪里来的。
啊，我发现在我们的 app.json 中我们设置了“locale”：“nl”，而在 Ext-local-nl.js 中它实际上设置了 dayNames。因此，如果我在其中更改它们，我会在我的日历中看到它们发生变化。但是标题仍然与列对齐，这是一种耻辱。
与第一个屏幕截图中的列对齐？看起来你对样式做了一些事情
是的，就像在第一个屏幕截图中一样，我们没有向日历组件添加任何样式。我们只是直接使用它。但我尝试为日历标题单元格添加宽度，出于某种原因，这修复了它。即使我使用设备工具栏调整窗口大小或使用不同的手机，它仍然看起来不错。