EXTJS localization (override classes)

Question

I have a simple ExtJS Tree. Everything works. In API, I see that I can change titles and other labels by overriding it. Here is the API link

Ext.require(['*']);
var path = "";

Ext.onReady(function () {
    Ext.define('My.Tree', {
        extend: 'Ext.tree.Panel',
        id: 'DriveTree',
        title: 'File Manager',
        width: 500,
        height: 650,
        store: storeTree,
        rootVisible: true,
        renderTo: 'tree-div',

        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                appendOnly: true
            }
        },

        useArrows: true,

        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'REFRESH', // MULTI LANGUAGE
                id: 'connectButton'

            },
                {
                    text: 'CHOOSE', // MULTI LANGUAGE
                    handler: function () {
                        Ext.Ajax.request({
                            url: '/test.json',
                            success: function (response, opts) {
                                Ext.MessageBox.alert('text', 'text'); // multi language

                            }
                        });
                    }
                }]
        }]
    });
    var tree = Ext.create('My.Tree', {});
});

I created another JS file and I override my tree.

Ext.define('My.Tree', {
    override: 'Ext.tree.Panel',
    title: 'new NAME',

});

But this does not work. I need to override texts of Ext.MessageBox.alert. Can I do that?

When I remove title from My.Tree panel, it works.

Answer 1

Because you're overriding tree.Panel, not your subclass. So the title on My.Tree takes precedence, because you override Ext.tree.Panel.

Instead:

Ext.define('MyApp.locale.fr.Tree', {
    override: 'My.Tree',
    title: 'Bonjour'
});