Extjs AJAX Language Api

Question

can we use google AJAX Language API with EXTjs????? i have tried example for translitration i have one html file and typemarathi.js

google.load("elements", "1", { packages: "transliteration" });

function onLoad() {
    var options = {
        sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
        destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
        shortcutKey: 'ctrl+g',
        transliterationEnabled: true
    };

    // Create an instance on TransliterationControl with the required
    // options.
    var control = new google.elements.transliteration.TransliterationControl(options);

    // Enable transliteration in the editable DIV with id
    // 'transliterateDiv'.
    control.makeTransliteratable([myname]);
}

google.setOnLoadCallback(onLoad);

it works fine.

but if i write the textfield in extjs

Ext.onReady(function(){ 
    var form1=new Ext.FormPanel({ 
            renderTo:document.body, 
            frame:true, 
            title:'My First Form', 
            widyh:250, 
            items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
        });

});

and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error

but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine

(i want to type and display multiple nonEnglish languages data programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..

Answer 1

Yes you can. Besides someone should clean his code, thats hurrible.

Answer 2

Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:

html:
<div class="x-form-item  x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
    <label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
    <div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
        <div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
            <input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
       </div>
    </div>
</div>

js:
....
items: [{
        xtype: 'combo',
        store: ['[email protected]', '[email protected]' ],
        plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
        fieldLabel: 'Send To',
        name: 'to'
    }]

As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:

var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];

Ext.each(Ext.select('label'), function(item){
    labelIds.push(item.id);
});

control.makeTransliteratable(labelIds);

But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.