title: Extjs with google Ajax Language Api
body: <p>Can we use google AJAX Language API with EXTjs?
  I have tried example for translation, I have one html file:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;HTML&gt;
   &lt;HEAD&gt;
    &lt;TITLE&gt; New Document &lt;/TITLE&gt;
     &lt;link rel="stylesheet" type="text/css" href="F:\vaishali.g\ext-3.1.0\resources\css\ext-all.css"/&gt;
    &lt;script type="text/javascript" src="F:\vaishali.g\ext-3.1.0\adapter\ext\ext-base.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="F:\vaishali.g\ext-3.1.0\ext-all.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="F:\vaishali.g\ext-3.1.0\ext-all-debug.js"&gt;&lt;/script&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
    &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="F:\vaishali.g\Assignments\EXTJS\typemarathi.js"&gt;&lt;/script&gt;
  
   &lt;/HEAD&gt;
  
   &lt;body&gt;
      Type in Hindi (Press Ctrl+g to toggle between English and Hindi)&lt;br&gt;
     &lt;input type="text" id="myid" name="myname"&gt;
    &lt;/body&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>and typemarathi.js</p>
  
  <p>google.load("elements", "1", {
              packages: "transliteration"
            });</p>
  
  <pre><code>  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);
  </code></pre>
  
  <p>it works fine. But if I write the textfield in extjs</p>
  
  <pre><code>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'
  
                      }
                  ]
  });
  });
  </code></pre>
  
  <p>and try to pass firstname (name attribute to <strong>control.makeTransliteratable([firstname])</strong>)
  then it does not work... it says "invalid id error". But if I pass->(html textfiled name to it) <strong>control.makeTransliteratable([myname])</strong> it works fine.</p>