PDA

View Full Version : Static Localization



atul.sachan@capgemini.com
4 Jan 2012, 11:30 PM
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----------------

twaindev
5 Jan 2012, 7:28 AM
The localization script should be loaded after the form, otherwise the form is not defined yet.


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

atul.sachan@capgemini.com
5 Jan 2012, 9:44 PM
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.

twaindev
6 Jan 2012, 3:12 AM
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.