Ext.define("IceCap.ux.form.field.AdvancedComboBox", {

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

	alias: [
		"widget.DDLIB"
	],

	minChars: 1,  // character needed to start server search,
	maxLength: 10,
	displayField: "key",
	forceSelection: false,
	valueField: "key",
	typeAhead: false,
	pageSize: 25,
	hideTrigger: false,
	matchFieldWidth: false,

	listeners: {
		keydown: {
			fn: function(i_field, i_event) {

				var n_key = i_event.getKey();
				
				if (i_field.isExpanded) {
					if (n_key == Ext.event.Event.DOWN || n_key == Ext.event.Event.UP) {
						i_event.stopEvent();
					}
				}
			}
		},
	},

	initComponent: function() {

		var i_self = this;
		i_self.tpl = i_self.createTemplate();

		var i_store = Ext.create("Ext.data.Store", {
			proxy: {
				url: "/icecap/ddlibs.aspx?func=getRows",
				type: "ajax",
				reader: {
					type: "json"
				}
			},
			pageSize: i_self.pageSize || 25,
			fields: [
				{
					name: "key",
					type: "auto"
				},
				{
					name: "value",
					type: "auto"
				}
			],
			autoLoad: true
		});

		i_self.store = i_store;

		i_self.callParent();
	},

	createTemplate: function() {

		var i_template = new Ext.XTemplate(
			"<tpl for=\".\">",
				"<li role=\"option\" class=\"x-boundlist-item\" style=\"text-overflow: ellipsis; white-space: nowrap; overflow:hidden;\">",
					"<b>{key} - </b> {value}",
				"</li>",
			"</tpl>"
		);

		return i_template;
	}
});
