EXTJS4.x之国际化

最新推荐文章于 2016-07-29 17:18:23 发布

包包_安安

最新推荐文章于 2016-07-29 17:18:23 发布

阅读量5.6k

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/yunji3344/article/details/8944405

版权

extjs 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

extjs工程实现国际化支持，但是在Sencha Architect 里面我还没找到实现方法，所以只能在源码上来实现了，下面我们来实现一个国际化的例子：

使用Sencha Architect 创建localization工程，保存到webroot目录下，并制作以下界面

保存并运行一下

可以看到现在是英文的

下面我们关闭Sencha Architect，在myeclipse中直接编辑代码。

修改app.html文件，内容如下

<!DOCTYPE html>

<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Localization</title>
    <script src="http://extjs.cachefly.net/ext-4.1.1-gpl/ext-all.js"></script>
    <link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
    <!-- Include the translations -->
    <script type="text/javascript" src="ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="app.js?_dc=1368864811298"></script>
</head>
<body></body>
</html>

导入 ext- lang-zh_CN.js文件，这个是中文文件，以此类推需要多个个语言就要多少个类似的文件

ext-lang-zh_CN.js的内容如下

var myProject = {};
myProject.string = {};
myProject.string.title = '我的表单';
myProject.string.lable = '本地化';

然后修改MyForm.js内容如下

/*
 * File: app/view/MyForm.js
 *
 * This file was generated by Sencha Architect version 2.1.0.
 * http://www.sencha.com/products/architect/
 *
 * This file requires use of the Ext JS 4.1.x library, under independent license.
 * License of Sencha Architect does not include license for Ext JS 4.1.x. For more
 * details see http://www.sencha.com/license or contact license@sencha.com.
 *
 * This file will be auto-generated each and everytime you save your project.
 *
 * Do NOT hand edit this file.
 */

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 250,
    width: 400,
    bodyPadding: 10,
    title: myProject.string.title,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'label',
                    text: myProject.string.lable
                }
            ]
        });

        me.callParent(arguments);
    }

});

保存运行可以看到

同样我们创建一个ext-lang-es.js内容如下

var myProject = {};
myProject.string = {};
myProject.string.title = 'My From';
myProject.string.lable = 'Localization';

在app.html中改为导入 ext- lang-es.js。保存运行

最后只需要根据不同的语言需求动态加载不同的语言包即可

包包_安安

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录