Ext4 语言本地化中文包不能汉化日期日历控件的BUG

最新推荐文章于 2022-05-09 10:54:10 发布

刘晨哈

最新推荐文章于 2022-05-09 10:54:10 发布

阅读量181

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

之前写过一个《真正的Extjs 4.2 支持时间选择的日历扩展》：http://gogo1217.iteye.com/blog/1856265。当时发现引入中文本地化资源文件后，“星期几”一律变为“y”，于是在picker组件后，照着Ext.picker.Date增加了一段本地化代码，汉化成功，并没有对细节进行探索。

今天同事提交一段代码，发现页面中的日历选择控件星期几全部变为"y"了，而月份选择则没有任何问题，这才翻翻Ext-js源码看下。

原因分析：

1、打开ext-lang-zh_CN.js源码，发现对Ext.Date的本地化是放在Ext.onReady中做的，而对Ext.picker.Date等其他的本地化是立即生效，但在Ext.picker.Date又没有覆盖dayNames，不知道他的本意是什么？

2、打开Ext.picker.Month的源码，发现在212行 beforeRender方法中，months是在创建组件的时候从Ext.Date.getShortMonthName获取的，如下图所示：

即月份本地化能成功是源于，他在组件创建的时候从Ext.Date中获取，在组件创建时，Ext.Date已经被覆写。

3、打开Ext.picker.Date源码，发现在443行beforeRender方法中，dayNames是直接获取的prototype属性，而原型中的dayNames是Ext.picker.Date加载完毕后，直接从Ext.Date中获取的，可以在Ext.picker.Date源码尾部看到，如下图所示：

Ext.picker.Date不能覆写成功的原因在于，他是在类加载完毕后，直接对原型覆写，而此时ext-lang-zh_CN.js并为对Ext.Date的属性覆写，所以获取的还是英文的描述信息。

4、在不加载中文本地化资源文件时，能正确显示英文的星期几首字母大写，但加入后却是最后一个字母，原因是ext-lang-zh_CN.js在135行对Ext.picker.Date中的getDayInitial方法覆写，改为获取dayNames最后一个字符，因此全部展现为"y”。

修改办法：

直接修改源码？这样子做法在升级的时候很不方便。

我们建议通过以下代码进行修改，在页面引入ext-lang-zh_CN.js后，我们的业务代码创建Ext.picker.Date，对Ext.picker.Date的原型属性再次修改即可。

由于Ext.Date的本地化是放在Ext.onReady中做的，因此再次覆写的时候也需要放在Ext.onReady中。

最终代码如下：

<html>
<head>
    <title>Ext JS 4.2 Examples</title>
    <meta http-equiv="Context-Type" content="text/html;chartset=utf-8">

    <link rel="stylesheet" type="text/css" href="resources/ext-theme-neptune/ext-theme-neptune-all.css" />
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
    <script type="text/javascript">
    	Ext.onReady(function(){
    		var proto = Ext.picker.Date.prototype,
                date = Ext.Date;

            proto.monthNames = date.monthNames;
            proto.dayNames   = date.dayNames;
            proto.format     = date.defaultFormat;
    	});
    </script>
</head>
<body>
</body>
</html>