/**
@name Edo.controls.SuperSelect
@class
@typeName superselect
@description 超级选择框
@extend Edo.controls.ComboBox
*/
Edo.controls.SuperSelect = function(){
Edo.controls.SuperSelect.superclass.constructor.call(this);
};
Edo.controls.SuperSelect.extend(Edo.controls.ComboBox,{
/**
@name Edo.controls.SuperSelect#multiSelect
@property
@type Boolean
@default true
*/
multiSelect: true,
/**
@name Edo.controls.SuperSelect#autoHeight
@property
@type Boolean
@default true
*/
autoHeight: true,
popupReset: false,
/**
@name Edo.controls.SuperSelect#triggerVisible
@property
@type Boolean
@default false
*/
triggerVisible: false,
elCls: 'e-superselect',
delimiter: ',',
/**
@name Edo.controls.SuperSelect#valueField
@property
@type String
@default id
*/
valueField: 'id',
/**
@name Edo.controls.SuperSelect#textField
@property
@type String
@default text
@description 文本显示字段
*/
textField: 'text',
itemRenderer: function(r, rowIndex){
return ''+r[this.textField]+'';
},
setValue: function(vv){
if(!Edo.isValue(vv)) vv = [];
if(typeof vv == 'string') vv = vv.split(this.delimiter);
if(!(vv instanceof Array)) vv = [vv];
this.selecteds = [];
vv.each(function(v){
var o = {};
o[this.valueField] = v; //{id: 1}
var index = this.data.findIndex(o);
if(index != -1){
this.selecteds.add(this.data.getAt(index));
}
}, this);
this.view.data.load(this.selecteds);
this.fixAutoSize();
this.relayout();
},
getValue: function(){
var rs = [];
this.selecteds.each(function(o){
if(this.valueField == '*') rs.add(o);
else rs.add(o[this.valueField]);
}, this);
return rs.join(this.delimiter);
},
initEvents: function(){
this.on('keydown', this._onkeydown, this);
this.on('click', this._onclick, this);
this.on('beforeselectionchange', this._onSuperSelectBeforeSelectionChange, this, 0);
Edo.controls.SuperSelect.superclass.initEvents.call(this);
},
_onclick: function(e){
if(Edo.util.Dom.hasClass(e.target, 'e-superselect-item-close')){
var rowIndex = parseInt(e.target.id);
var row = this.view.data.getAt(rowIndex);
this.selecteds.remove(row);
this.view.data.load(this.selecteds);
//调整尺寸
this.fixAutoSize();
this.fixInput(this.itemIndex);
this.relayout('select');
}
},
_onkeydown: function(e){
var inField = this.field == e.target;
if(inField && this.field.value != '') return;
if(this.popupDisplayed) {
if(e.keyCode == 8 && this.field.value == ''){
this.hidePopup.defer(100, this);
}
return;
}
var autoSize = true;
switch(e.keyCode){
case 8:
e.stopDefault();
if(inField){
this.view.data.removeAt(this.itemIndex);
}else{
var sels = this.view.getSelecteds();
this.view.data.removeRange(sels);
}
this.itemIndex -= 1;
var item = this.view.getByIndex(this.itemIndex);
if(!item){
this.itemIndex -= 1;
item = this.view.getByIndex(this.itemIndex);
}
break;
case 127:
if(inField){
this.view.data.removeAt(this.itemIndex+1);
}else{
var sels = this.view.getSelecteds();
this.view.data.removeRange(sels);
}
break;
case 37:
case 38:
this.itemIndex -= 1;
this.view.clearSelect();
break;
case 39:
this.itemIndex += 1;
//
this.view.clearSelect();
break;
case 40:
return;
break;
case 36: //home
this.itemIndex = -1;
this.view.clearSelect();
break;
case 35: //end
this.itemIndex = this.view.data.getCount()-1;
this.view.clearSelect();
break;
default:
// this.view.fixAutoSize();
// this.view.relayout('input');
// this.fixAutoSize();
// this.relayout('input');
return;
}
if(this.itemIndex < -1){
this.itemIndex = -1;
}
if(this.itemIndex > this.view.data.getCount()-1){
this.itemIndex = this.view.data.getCount()-1;
}
this.fixInput(this.itemIndex);
this.fixAutoSize();
this.relayout();
},
_onSuperSelectBeforeSelectionChange: function(e){
var sel = e.selectedItem;
if(!sel) return false;
if(!this.multiSelect){
this.selecteds = [];
}
this.itemIndex += 1;
this.selecteds.insert(this.itemIndex, sel);
if(this.itemIndex < -1){
this.itemIndex = -1;
}
if(this.itemIndex > this.view.data.getCount()-1){
this.itemIndex = this.view.data.getCount()-1;
}
//调整尺寸
this.view.data.load(this.selecteds);
this.field.value = '';
//this.fixInput(this.itemIndex);
this.fixInput.defer(10, this, [this.itemIndex]); //###
this.fixAutoSize();
this.relayout('select');
return false;
},
createChildren: function(el){
Edo.controls.SuperSelect.superclass.createChildren.call(this, el);
//this.selecteds.addRange(this.data.source);
this.view = Edo.create({
type: 'dataview',
render: this.el,
itemSelector: 'e-superselect-item',
itemCls: 'e-superselect-item',
selectedCls: 'e-superselect-item-checked',
cls: 'e-superselect-inner',
width: (this.realWidth || this.defaultWidth) - (this.triggerVisible ? 20 : 0),
//height: this.realHeight || this.defaultHeight,
autoHeight: true,
data: this.selecteds,
emptyText: '请选择',
tpl: '<%=this.createView()%>',
valueField: this.valueField,
textField: this.textField,
itemRenderer: this.itemRenderer,
enableDeferRefresh: false,
createView: function(){
var data = this.data;
if(!data || data.getCount() == 0) return '';
data = this.data.view;
var text = '';
var sb = [''];
for(var i=0,l=data.length; i';
//sb[sb.length] =text;
return sb.join('');
},
onmousedown: this._onViewMouseDown.bind(this)
});
Edo.util.Dom.addClass(this.field, 'e-superselect-text');
var viewEl = this.view.el;
Edo.util.Dom.append(viewEl, this.field);
this.initInput();
Edo.util.Dom.on(document, 'mousedown', function(e){
if(this.within(e)){
Edo.util.Dom.addClass(this.el, this.focusClass);
}else{
this.view.clearSelect();
Edo.util.Dom.removeClass(this.el, this.focusClass);
}
}, this);
},
createPopup: function(){
Edo.controls.SuperSelect.superclass.createPopup.a(this, arguments);
},
showPopup: function(e){
Edo.controls.SuperSelect.superclass.showPopup.c(this, e);
this.data.filter(this.filterFn, this);
},
filterFn: function(o){
var data = this.selecteds;
if(data.indexOf(o) != -1) return false;
var text = String(o[this.displayField]);
if(text.indexOf(this.text) != -1){
return true;
}else{
return false;
}
},
syncSize: function(){ //设置组件尺寸,并设置容器子元素的所有尺寸!
Edo.controls.SuperSelect.superclass.syncSize.call(this);
this.autoInput();
},
initInput: function(){
if(!this.input){
this.input = this.field;
Edo.util.Dom.on(this.input, 'keydown', function(e){
this.autoInput();
}, this);
Edo.util.Dom.on(this.input, 'keyup', function(e){
this.autoInput();
}, this);
}
},
//自适应输入框的宽度
autoInput: function(){
var text = this.field.value;
if(text != ''){
Edo.util.Dom.addClass(this.field, 'e-supserselect-text-inputed');
var size = Edo.util.TextMetrics.measure(this.field, text);
Edo.util.Dom.setWidth(this.field, size.width+21);//2是padding-right
}else{
Edo.util.Dom.removeClass(this.field, 'e-supserselect-text-inputed');
this.field.style.width = '15px';
}
this.field.style.height = '20px';
this.field.style.lineHeight = '20px';
//Edo.util.Dom.repaint(this.input);
//实时看组件的高度是否有变动, 如果有,则调整尺寸
//
// this.heightGet = false;
// this.view.heightGet = false;
// this.relayout('input');
},
fixInput: function(index){
var items = this.view.getItems()
var targetItem = items[index];
var viewEl = this.view.el;
if(targetItem){
Edo.util.Dom.after(targetItem, this.field);
}else {
Edo.util.Dom.preend(viewEl, this.field);
}
this.focus.defer(50, this);
},
_onViewMouseDown: function(e){
var el = this.view.getItemEl(e.target);
if(el){
this.itemIndex = this.view.getItemIndex(el);
return;
}
this.view.clearSelect();
//根据鼠标坐标, 判断在哪一个之后(如果没有找到目标记录, 则加在第一个)
this.itemIndex = this.findTargetItem(e.xy);
this.fixInput(this.itemIndex);
//if(e.target != this.field){
//}
//
},
findTargetItem: function(xy){
var boxs = [];
var items = this.view.getItems()
for(var i=0,l=items.length; i