Ext.define("Ext.ux.form.field.LocaleComboBox", {

	extend: "Ext.form.field.ComboBox",

	alias: [
		"widget.localeComboBox",
		"widget.localeCombo",
		"widget.ip2LocaleLanguageComboBox"
	],

	displayField: "code",
	valueField: "code",
	queryMode: "local",
	typeAhead: false,

	store: null,

	requires: [
		"Ext.ux.data.store.Locale"
	],

	initComponent: function () {

		var i_self = this;

		Ext.apply(i_self, {
			emptyText: ip2.i18n({
				da: "Vælg et sprog",
				en: "Choose a language"
			}),
			store: i_self.createStore(),
			tpl: i_self.createListTemplate(),
			displayTpl: i_self.createDisplayTemplate()
		});

		i_self.callParent(arguments);

		return i_self;
	},

	createStore: function () {

		var i_self = this;
		var i_store = Ext.create("Ext.ux.data.store.Locale", {});

		return i_store;
	},

	createListTemplate: function () {

		var i_self = this;

		var i_tpl = Ext.create("Ext.XTemplate",
			"<tpl for=\".\">",
				"<li role=\"option\" class=\"x-boundlist-item\">",
					"<div>",
						"<div style=\"float: left; width: 16px; height: 14px; margin-top:4px;\" class=\"AIL-icon AIL-icon-18 icon-{flag}\"></div>",
						"<div style=\"margin-left: 20px;\">{country} - {[this.renderer(values.language)]}</div>",
					"</div>",
				"</li>",
			"</tpl>",
			{
				renderer: function(value) {
					return ip2.i18n(value);
				}
			}
		);

		return i_tpl;
	},

	createDisplayTemplate: function() {

		var i_self = this;

		var i_tpl = Ext.create("Ext.XTemplate",
			"<tpl for=\".\">",
				"{[typeof values === \"string\" ? values : this.renderer(values)]}",
				"<tpl if=\"xindex < xcount\">" + i_self.delimiter + "</tpl>",
			"</tpl>",
			{
				renderer: function(values) {
					return ip2.i18n(values.language);
				}
			}
		);

		return i_tpl;
	}
});
