Ext.ns('Ext.ux.form');		
Ext.ux.form.Sel = Ext.extend(Ext.form.Field,{
	delimiter: ',',
	anchor: 0,
	minSelections:0,
	valueField:1,
	blankText:Ext.form.TextField.prototype.blankText,
	maxSelections:Number.MAX_VALUE,
	minSelectionsText:'Minimum {0} item(s) required',
	maxSelectionsText:'Maximum {0} item(s) allowed',
	defaultAutoCreate: {
		tag: "div"
	},
	autoScroll: false,
	scroll: false,
	initComponent: function(config){
		Ext.apply(this, config);
		Ext.apply(this.initialConfig, config);
		Ext.ux.form.Sel.superclass.initComponent.apply(this, arguments);
        this.addEvents({
            'dblclick' : true,
            'click' : true,
            'change' : true
        });
	},
	onRender: function(ct, position){
		Ext.ux.form.Sel.superclass.onRender.call(this, ct, position);
		var fs = this.fs = new Ext.form.FieldSet({
			title: this.legend,
			renderTo: this.el,
			width: this.width,
			height: this.height - 10,
			style: "padding:0;",
			tbar: this.tbar
		});
		
		this.csm = new Ext.grid.CheckboxSelectionModel();
		this.gird = new Ext.grid.GridPanel({
			border: false,
			store: this.store,
			stripeRows: true,
			height: this.height,
			layout: 'fit',
	         viewConfig: {
                forceFit: true
            },
			hideHeaders: true,
			loadMask: true,
			autoExpandColumn: this.valueField,
			cm: new Ext.grid.ColumnModel({
				columns: [this.csm, {
					header: this.valueField,
					id: this.valueField,
					width: '100%'
				}]
			}),
			sm: this.csm
		});
		this.store.load();
		fs.add(this.gird);
		this.hiddenName = this.name || Ext.id();
		var hiddenTag = {
			tag: "input",
			type: "hidden",
			value: "",
			name: this.hiddenName
		};
        this.gird.on('click', this.onViewClick, this);
		this.hiddenField = this.el.createChild(hiddenTag);
		this.hiddenField.dom.disabled = this.hiddenName != this.name;
		fs.doLayout();
	},
	afterRender: function(){
		Ext.ux.form.Sel.superclass.afterRender.call(this);
	},
	getValue: function(){
		var ids = new Array();
		if (this.gird.getSelectionModel().getSelected()) {
			Ext.each(this.gird.getSelectionModel().getSelections(), function(item, index){
				ids[index] = item.data[this.valueId];
			}, this);
			return ids.join(',');
		}
		return ids;
	},
	setValue: function(value){
		if(value != ''){
		var set = value.split(',');
		this.gird.getSelectionModel().clearSelections();
		Ext.each(this.gird.store.data.items, function(item, index){
			Ext.each(set, function(item1, index1){
				if (item.data[this.valueId] == item1) {
					this.gird.getSelectionModel().selectRow(index, true);
				}
			}, this);
		}, this);
		}
		else{
			this.gird.getSelectionModel().clearSelections();
		}
		this.validate();
	},
	validateValue: function(value){
		//this.fs.doLayout();
		if (this.getValue() != '') {
			value = this.getValue().toString().split(',');
		}
		else {
			value.length = 0;
		}
		
		if (value.length < 1){
			if (this.allowBlank) {
				this.clearInvalid();
				return true;
			}
			else {
				this.markInvalid(this.blankText);
				return false;
			}
		}
		if (value.length < this.minSelections) {
			this.markInvalid(String.format(this.minSelectionsText, this.minSelections));
			return false;
		}
		if (value.length > this.maxSelections) {
			this.markInvalid(String.format(this.maxSelectionsText, this.maxSelections));
			return false;
		}
		return true;
	},
    onViewClick: function(vw, index, node, e) {
        this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
        this.hiddenField.dom.value = this.getValue();
        this.fireEvent('click', this, e);
        this.validate();
    },
	disable: function(){
		this.disabled = true;
		this.hiddenField.dom.disabled = true;
		this.fs.disable();
	},
	enable: function(){
		this.disabled = false;
		this.hiddenField.dom.disabled = false;
		this.fs.enable();
	}
}); 
Ext.reg('sel', Ext.ux.form.Sel);