1. #1
    Sencha User
    Join Date
    Jan 2009
    Posts
    37
    Vote Rating
    0
    nfuids is on a distinguished road

      0  

    Question Unanswered: What's the best way to initialize a component and support i10n?

    Unanswered: What's the best way to initialize a component and support i10n?


    Hi,

    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:
    Code:
    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.

    Thanks

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,680
    Answers
    130
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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:
    Code:
    initComponent: function() {
        this.title = this.panelTitleText;
    
        this.callParent(arguments);
    }
    you could also use the constructor and modify the configs.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  3. #3
    Sencha User
    Join Date
    Jan 2009
    Posts
    37
    Vote Rating
    0
    nfuids is on a distinguished road

      0  

    Default


    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
    'm thinking the config/initConfig is probably the best way. And doing so wouldn't prevent the i10n to work.

    What do you think?

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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:

    Code:
    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:

    http://www.sencha.com/forum/showthread.php?143869

    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?

Thread Participants: 2