Ext.define("Ext.ux.form.field.ComboInline", {
	extend: "Ext.form.field.ComboBox",
	alias: "widget.comboinline",

	config: {
		valueField: "value",
		displayField: "key"
	},

	initComponent: function() {

		var i_self = this;

		Ext.apply(i_self, {
			queryMode: "local",
			displayField: i_self.getDisplayField(),
			valueField: i_self.getValueField(),
			triggerAction: 'all',
			displayTpl: i_self.getDisplayTemplate(),
			tpl: i_self.getItemTemplate(),
			maxLength: 1000,
			store: Ext.create("Ext.data.Store", {
				fields: [
					{ name: "key", type: "auto" },
					{ name: "value", type: "auto" }
				],
				data: i_self.values,
				idProperty: i_self.getValueField()
			})
		});

		i_self.callParent();

		return i_self;
	},

	getDisplayTemplate: function() {

		var i_self = this;

		var i_template = Ext.create('Ext.XTemplate',
			'<tpl for=".">',
				'{[this.renderer(values.key)]}',
			'</tpl>',
			{
				renderer: function(s_key) {
					if (s_key) {
						return ip2.i18n(s_key);
					}
					else {
						return "";
					}
				}
			}
		);
		return i_template;
	},

	getItemTemplate: function() {

		var i_self = this;

		var i_template = Ext.create('Ext.XTemplate',
			'<tpl for=".">',
				'<li role="option" class="x-boundlist-item">',
					'{[this.renderer(values.key)]}',
				'</li>',
			'</tpl>',
			{
				renderer: function(s_key) {
					if (s_key) {
						return ip2.i18n(s_key);
					}
					else {
						return "";
					}
				}
			}
		);
		return i_template;
	},

	renderer: function(value) {

		var i_field = this;
		var s_return = value;
		Ext.Array.each(i_field.values, function(o_record) {
			if (o_record.value == value) {
				s_return = ip2.i18n(o_record.key);
			}
		});
		return s_return;
	}
});
