Ext.define('Ext.ux.form.field.Gridpicker', {
	extend: 'Ext.form.ComboBox',
	alias: ['widget.ux.form.field.gridpicker'],

	// copied from ComboBox

	initComponent: function() {

		var i_self = this;

		var o_listConfig = i_self.listConfig = i_self.listConfig || {};
		o_listConfig = Ext.Object.merge(o_listConfig, {
			enableColumnMove: false,
			enableColumnHide: false,
			enableColumnResize: false,
			features: [{
				ftype: "grouping",
				groupHeaderTpl: '{name} ({rows.length})',
				hideGroupedHeader: true,
				enableGroupingMenu: false,
				startCollapsed: true
			}],
			columns: [
				{
					dataIndex: "key",
					text: ip2.i18n({
						da: "Type",
						en: "Type"
					}),
					flex: 1,
					menuDisabled: true
				},
				{
					dataIndex: 'group',
					flex: 1,
					menuDisabled: true
				}
			]
		});
		i_self.store.sorters = [{
			property: 'key',
			direction: 'ASC'
		}];
		i_self.callParent(arguments);
	},

	createPicker: function() {

		var i_self = this;
		var i_picker;
		var menuCls = Ext.baseCSSPrefix + 'menu';
		var opts = Ext.apply({
			selModel: {
				mode: i_self.multiSelect ? 'SIMPLE' : 'SINGLE'
			},
			floating: true,
			hidden: true,
			ownerCt: i_self.ownerCt,
			cls: i_self.el.up('.' + menuCls) ? menuCls : '',
			store: i_self.store,
			displayField: i_self.displayField,
			focusOnToFront: false,
			pageSize: i_self.pageSize
		}, i_self.listConfig, i_self.defaultListConfig);

		i_picker = i_self.picker = Ext.widget('gridpanel', opts);

		// hack: pass getNode() to the view
		i_picker.getNode = function() {
			i_picker.getView().getNode(arguments);
		};

		if (!i_picker.initialConfig.maxHeight) {
			i_picker.on({
				beforeshow: i_self.onBeforePickerShow,
				scope: i_self
			});
		}

		i_self.mon(i_picker, {
			itemclick: function(i_picker, i_record) {

				var i_self = this;
				var a_records = i_picker.getSelection();
				if (!i_self.multiSelect) {
					i_self.setValue(i_record);
					i_self.collapse();
				}
				else {
					i_self.setValue(a_records);
				}
				i_self.fireEvent("select", i_self, a_records);
			},
			scope: i_self
		});

		i_self.mon(i_picker.getSelectionModel(), {
			'beforeselect': i_self.onBeforeSelect,
			'beforedeselect': i_self.onBeforeDeselect,
			scope: i_self
		});

		return i_picker;
	}
});
