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

版权所有,转载请注明来源http://gogo1217.iteye.com,违者必究!

 

之前写过一个《真正的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,不知道他的本意是什么?

Ext4 语言本地化中文包不能汉化日期日历控件的BUG_第1张图片

 

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

 Ext4 语言本地化中文包不能汉化日期日历控件的BUG_第2张图片

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

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

 Ext4 语言本地化中文包不能汉化日期日历控件的BUG_第3张图片

Ext4 语言本地化中文包不能汉化日期日历控件的BUG_第4张图片

 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>

 

 

 

你可能感兴趣的:(ext4)