Results 1 to 4 of 4

Thread: Static Localization

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    0
      0  

    Question Static Localization

    I am trying to localize labels but it is not working for me. any one can suggest what is wrong here ??

    dutch-form.html
    ---------------------start-------------------------------------------------
    <!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">-->
    <html lang="nl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Dutch Form</title>
    <!-- Ext -->
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-debug.js"></script>


    <!-- Example -->
    <link rel="stylesheet" type="text/css" href="extjs/examples/shared/example.css" />
    <script type="text/javascript" src="extjs/examples/shared/examples.js"></script>


    <!-- <script type="text/javascript" src="extjs/locale/ext-lang-nl.js"></script> -->


    <script type="text/javascript" src="ContactForm-nl.js"></script>
    <script type="text/javascript" src="dutch-provinces.js"></script>
    <script type="text/javascript" src="ContactForm.js"></script>

    </head>
    <body>


    <h1>Localization with Ext</h1>
    <p>The js is not minified so it is readable. See <a href="ContactForm.js">ContactForm.js</a> and <a href="ContactForm-nl.js">ContactForm-nl.js</a>.</p>
    </body> </html>
    -----------------------------------End dutch-form.html-------------------------------------------
    dutch-provinces.js
    ------------------------------------------------------------------
    if (Ext.app.ContactForm) {
    Ext.apply(Ext.app.ContactForm.prototype, {
    formTitle: 'Contact Informatie (Dutch)',
    firstName: 'Voornaam1111111111',
    lastName: 'Achternaam',
    surnamePrefix: 'Tussenvoegsel',
    company: 'Bedrijf',
    state: 'Provincie',
    stateEmptyText: 'Kies een provincie...',
    email: 'E-mail',
    birth: 'Geb. Datum',
    save: 'Opslaan',
    cancel: 'Annuleren'
    });
    }
    --------------------------------------end dutch-provinces.js------------------------
    ContactForm.js
    -------------------------------------start-----------------------

    Ext.define('Ext.app.ContactForm', {
    extend: 'Ext.form.Panel',
    requires: [
    'Ext.data.ArrayStore',
    'Ext.data.reader.Array',
    'Ext.form.field.ComboBox',
    'Ext.form.field.Date'
    ],
    formTitle: 'Contact Information (English)',
    firstName: 'First Name',
    lastName: 'Surname',
    surnamePrefix: 'Surname Prefix',
    company: 'Company',
    state: 'State',
    stateEmptyText: 'Choose a state...',
    email: 'E-mail',
    birth: 'Date of Birth',
    save: 'Save',
    cancel: 'Cancel',
    initComponent : function(config) {
    Ext.apply(this, {
    url: 'save-form.php',
    frame: true,
    title: this.formTitle,
    bodyStyle: 'padding:5px 5px 0',
    width: 370,
    defaultType: 'textfield',
    defaults: {
    width: 330
    },
    items: [{
    fieldLabel: this.firstName,
    name: 'firstname',
    allowBlank:false
    },{
    fieldLabel: this.lastName,
    name: 'lastName'
    },{
    fieldLabel: this.surnamePrefix,
    width: 150,
    name: 'surnamePrefix'
    },{
    fieldLabel: this.company,
    name: 'company'
    }, Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: this.province,
    hiddenName: 'state',
    store: Ext.create('Ext.data.ArrayStore', {
    fields: ['provincie'],
    data : Ext.exampledata.dutch_provinces // from dutch-provinces.js
    }),
    displayField: 'provincie',
    typeAhead: true,
    queryMode: 'local',
    triggerAction: 'all',
    emptyText: this.stateEmptyText,
    selectOnFocus:true
    }), {
    fieldLabel: this.email,
    name: 'email',
    vtype:'email'
    }, Ext.create('Ext.form.field.Date', {
    fieldLabel: this.birth,
    name: 'birth'
    })
    ],


    buttons: [{
    text: this.save
    },{
    text: this.cancel
    }]
    });


    this.callParent(arguments);
    }
    });


    Ext.require([
    'Ext.tip.QuickTipManager'
    ]);


    Ext.onReady(function(){
    //Ext.tip.QuickTipManager.init();


    // turn on validation errors beside the field globally
    //Ext.form.field.Base.prototype.msgTarget = 'side';


    var bd = Ext.getBody();


    bd.createChild({tag: 'h2', html: 'Localized Contact Form'});


    // simple form
    var simple = Ext.create('Ext.app.ContactForm', {});
    simple.render(document.body);
    });
    ----------------------------------------end ContactForm.js----------------
    AS

  2. #2
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    231
    Answers
    15
    Vote Rating
    8
      0  

    Default

    The localization script should be loaded after the form, otherwise the form is not defined yet.

    Code:
    <script type="text/javascript" src="dutch-provinces.js"></script>
    <script type="text/javascript" src="ContactForm.js"></script>
    <script type="text/javascript" src="ContactForm-nl.js"></script>

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    0
      0  

    Default

    Thanks for reply !! but still it is not working i am getting error in ContactForm-nl.js "
    Uncaught TypeError: Cannot read property 'ContactForm' of undefined
    if i define in this way "if ('Ext.app.ContactForm') {Ext.apply('Ext.app.ContactForm.prototype', { ....." then no error but properties are not updating.


    AS

  4. #4
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    231
    Answers
    15
    Vote Rating
    8
      0  

    Default

    This is most likely because newer browsers load scripts in parallel. This may cause the localization script to execute before the form script. You can check this by calling console.log in the first line of the scripts.

    Try to put the localization code in a function/component and then execute it in onReady.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •