Ext.js 本地化

什么是本地化

本地化就是根据不同的语言、地域、习惯等因素，将软件、网站、APP等产品进行针对不同地区的定制，以适应当地用户的需求和习惯，包括语言、时间、货币等方面的差异。

Ext.js 本地化支持

Ext.js 是一个用于构建富客户端应用程序的 Web 框架，提供了强大的数据处理、容器管理和组件化的能力。在应用程序的本地化方面，Ext.js 提供了完善的支持。

语言本地化

Ext.js 提供了语言本地化的能力。在 Ext.js 中，本地化文件使用 .js 文件来定义，可以根据需要定义多个本地化文件。

在代码中，可以使用以下方法来启用本地化：

Ext.onReady(function() {
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'Ext.ux.ajax': './ux/ajax'
        }
    });

    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.ux.ajax.JsonSimlet',
        'Ext.ux.ajax.SimManager'
    ]);

    Ext.application({
        name: 'HelloExt',
        launch: function() {
            Ext.create('Ext.grid.Panel', {
                renderTo: Ext.getBody(),
                store: Ext.create('Ext.data.Store', {
                    fields: ['name', 'email', 'phone'],
                    data: [
                        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
                        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
                        { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
                        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
                    ]
                }),
                columns: [
                    { text: _('Name'), dataIndex: 'name', width: 100 },
                    { text: _('Email'), dataIndex: 'email', width: 100 },
                    { text: _('Phone'), dataIndex: 'phone', width: 100 }
                ],
                height: 200,
                width: 400,
                title: _('My Grid Panel')
            });
        }
    });
});

时间本地化

在时间本地化方面，Ext.js 提供了格式化和解析时间的功能。可以使用以下代码来启用时间本地化：

Ext.setLocale('zh-cn');

Ext.util.Format.dateRenderer = function(format) {
    return function(v) {
        return Ext.util.Format.date(v, format || Ext.Date.defaultFormat);
    };
};

Ext.application({
    name : 'MyApp',

    launch : function() {
        Ext.create('Ext.form.Panel', {
            bodyPadding: 5,
            width: 350,

            // Fields will be arranged vertically, stretched to full width
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },

            // The fields
            defaultType: 'textfield',
            items: [
                {
                    fieldLabel: _('Date of Birth'),
                    name: 'dob',
                    xtype: 'datefield',
                    allowBlank: false,
                    format: _('Y-m-d')
                }, {
                    fieldLabel: _('Last Login'),
                    name: 'lastlogindate',
                    xtype: 'datefield',
                    format: _('Y-m-d')
                }
            ],

            // Reset and Submit buttons
            buttons: [{
                text: 'Reset',
                handler: function() {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Submit',
                formBind: true, //only enabled once the form is valid
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            success: function(form, action) {
                                Ext.Msg.alert('Success', action.result.msg);
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert('Failed', action.result.msg);
                            }
                        });
                    }
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});

货币本地化

在货币本地化方面，Ext.js 提供了格式化和解析货币的功能。可以使用以下代码来启用货币本地化：

Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext.create('Ext.window.Window', {
            title: _('Currency Test'),
            height: 150,
            width: 300,
            layout: 'fit',
            items: [
                {
                    xtype: 'form',
                    items: [
                        {
                            xtype: 'numberfield',
                            fieldLabel: _('Price'),
                            name: 'price',
                            submittedValue: false,
                            allowBlank: false,
                            listeners: {
                                change: function() {
                                    var form = this.up('form').getForm();
                                    form.findField('total').setValue(form.findField('price').getValue() * 1.0);
                                }
                            }
                        },
                        {
                            xtype: 'displayfield',
                            fieldLabel: _('Total'),
                            name: 'total',
                            renderer: function(value) {
                                return Ext.util.Format.currency(value, _('CNY'), 2);
                            }
                        }
                    ]
                }
            ],
            renderTo: Ext.getBody()
        });
    }
});

总结

Ext.js 的本地化支持非常完善，可以根据不同的时间、货币和语言等因素进行定制化开发，以满足不同地区用户的需求和习惯。对于多语言、多地区开发的应用程序来说，Ext.js 可谓是一个非常好的选择。