View Full Version : What's the best way to initialize a component and support i10n?

16 Dec 2011, 8:41 AM

I read the article about localization.. so since we're still at the beginning of the project, and we want our app to support localization, I decided to modify my component to match how ExtJS's component work with i10n.

Here is an example:

Ext.define('ElementsPMI.view.processgroup.MasterPanel', { extend: 'Ext.Panel',
alias: 'widget.processgroupmasterpanel',

* @cfg {String} panelTitleText
* The text to use for the title of the panel
panelTitleText: 'Process Group List',

* @cfg {String} previewPanelTitleText
* The text to use for the title of the preview panel
previewPanelTitleText: 'Preview Pane',

* @cfg {String} bottomPreviewCycleText
* The text to use for item 'Bottom' of the cycle button on the toolbar
bottomPreviewCycleText: 'Bottom',

* @cfg {String} rightPreviewCycleText
* The text to use for item 'Right' of the cycle button on the toolbar
rightPreviewCycleText: 'Right',

* @cfg {String} hidePreviewCycleText
* The text to use for item 'Hide' of the cycle button on the toolbar
hidePreviewCycleText: 'Hide',

* @cfg {String} previewCycleText
* The text to use for property 'Text' of preview pane cycle button on
* toolbar
previewCycleText: 'Reading Pane',

* @cfg {String} prependTextPreviewCycleText
* The text to use for property 'prependText' of preview pane cycle button
* on toolbar
prependTextPreviewCycleText: 'Preview: ',

* @cfg {String} summaryToggleButtonText
* The text to use for the summary toggle button on the toolbar
summaryToggleButtonText: 'Summary',

title: panelTitleText,
layout: 'border',
bodyPadding: 0,
border: true,

The problem, is the title property, which refer to a custom property (that could easily be overwritten by the resource file with the corresponding language.

But I get this error:
Uncaught ReferenceError: panelTitleText is not defined

1: I don't understand why this happens, since it was defined above the title

2: should I be using some sort of config object and create a constructor for this component and use Ext.apply or something similar? What's the best way to provide default values for some of the property and yet still allow user to define what they want? I see so many differents ways of doing it in the doc/sample/on the web, I'm not sure which one is best.


16 Dec 2011, 8:50 AM
since all properties of the class are defined at the same time, it is not a good idea to try to cross assign them as references. this would also not work, since they are not defined as local vars with (var x=...).

so, easy solution: use the initComponent method instead:

initComponent: function() {
this.title = this.panelTitleText;


you could also use the constructor and modify the configs.

18 Dec 2011, 6:40 PM
Thanks for the info.

What would be the best way to manage default values for my components? Using the initComponent as you said, or the constructor or to use the config property and initConfig() method as explained in section 2 of http://docs.sencha.com/ext-js/4-0/#!/guide/class_system

I (http://docs.sencha.com/ext-js/4-0/#!/guide/class_system)'m thinking the config/initConfig is probably the best way. And doing so wouldn't prevent the i10n to work.

What do you think?

18 Dec 2011, 9:57 PM
When you say 'default values for my components' are you talking specifically about localization or more generally?

Usually you'd just specify them on the class prototype by including them in the Ext.define:

Ext.define('MyClass', {
extend: ...

height: 200 // default of 200 for this class

In some cases you can't specify the default directly on the prototype, perhaps because the value is a reference type or depends on factors not known when the class is defined. In those cases I'd always favour the use of initComponent over a constructor. I wouldn't use the initConfig stuff if I were you, it was added to 4.0 a bit half-baked.

You may find the discussion on this thread useful for a better understanding of some of these topics:


As for your original localization issue, rather than creating a property called panelTitleText and copying it to the title, why not just call it title in the first place?