In my previous post, I have discussed on how to enable language translation in your server-side Ext.NET control.

But this translation method will not run “on-the-fly”. You need to refresh your page to get the new language rendered in the screen. To make it “on-the-fly”, you need to do these steps:

1. Add an Ext.NET Store in your View page. The Store will hold all the translation data. It will have two fields. The first field is the Key, which is your Ext.NET control’s ID. The second field is the Value, which is the translation result
2. When user changed its language preference, set the selected language in a cookie and reload the Store.
3. The Store will make a HttpRequest to the server. The server read the cookie, and returned a JSON Store object.
4. Handle the Ext.NET Store’s Load event by iterating the Store’s records, and then use Ext.getCmp to get the affected Ext.NET controls and set their Text/Label property
5. …..
6. Profit!!! 🙂

You might ask, “Why we need to set the language preference to a Cookie?” It’s required because it will make the Server know and remember about the changes.

Alright, now that I’ve told you the general concept, time to get dirty (with Code, not bacteria).

So in your Controller, we’ll add a method that returns AjaxStoreResult. Its function is to retrieve the resource set based on the language code specified in the cookie:

using Ext.Net;
using Ext.Net.MVC;
using System.Globalization;
using System.Threading;

// ... Code Snip ...
	public AjaxStoreResult Translate()
	{
		var lang = Request.Cookies["language"].Value;
		CultureInfo cult = Thread.CurrentThread.CurrentCulture;
		
		try {
			cult = new CultureInfo(lang);
		}
		catch(Exception ex) {}
		
		var res = Resources.LocalizedText.ResourceManager.GetResourceSet(cult, true, false);
		var trav = res.GetEnumerator();
		var dict = new Dictionary();
		
		while (trav.MoveNext())
		{
			if (trav.Key.ToString().Length > 2)
				dict.Add(trav.Key.ToString(), trav.Value.ToString());
		}
		
		var q = from c in dict
				select new { key = c.Key, value = c.Value };
				
		return new AjaxStoreResult(q, dict.Count);
	}
// ... Code Snip ...

And here is the Ext.NET Store in your views:

And finally, the event handler to the Store’s Load event:

var TranslateLoaded = function (objGrid, gridRecords, objOptions) {
	for (var i = 0; i < gridRecords.length; i++) {		
		var cmp = Ext.getCmp(gridRecords[i].data.key);
		if (cmp) {
			//Different Ext.NET control might need 
			//different treatment.
			if (cmp instanceof Ext.form.ComboBox) {		
				cmp.setFieldLabel(gridRecords[i].data.value);
			} 
			else if (cmp instanceof Ext.form.TriggerField) {
				if (cmp.emptyText != '') {
					Ext.apply(cmp, {
							emptyText : gridRecords[i].data.value
						});
					cmp.reset();
				}
				if (cmp.fieldLabel != '')
					cmp.setFieldLabel(gridRecords[i].data.value);
			} 
			else if (cmp instanceof Ext.menu.Item) {
				var pnl = tpMain.find('title', cmp.text);
				if (pnl.length > 0) {
					pnl[0].setTitle(gridRecords[i].data.value);
					pnl[0].reload();
				}
				cmp.setText(gridRecords[i].data.value);
			} 
			else if (cmp instanceof Ext.form.Label
				 || cmp instanceof Ext.tree.TreeNode
				 || cmp instanceof Ext.data.Node) {
					cmp.setText(gridRecords[i].data.value);
			} 
			else if (cmp instanceof Ext.Panel 
				|| cmp instanceof Ext.Window)
					cmp.setTitle(gridRecords[i].data.value);
			else if (cmp instanceof Ext.form.TextField 
				|| cmp instanceof Ext.form.CompositeField)
					cmp.setFieldLabel(gridRecords[i].data.value);
			else if (cmp instanceof Ext.Button) {
				if (cmp.getText() != '' && cmp.getText() != undefined)
					cmp.setText(gridRecords[i].data.value);
			} else if (cmp instanceof Ext.form.DisplayField) {
				cmp.setValue(gridRecords[i].data.value);
			}
		}
	}	
} 

I hope it helps 😉 Cheers!

Incoming Search

ext net