/**
* Created with IntelliJ IDEA.
* User: seeker910
* Date: 13-11-8
* Time: 上午1:35
*
* 数据复选控件
*
*/
Rsd.define('Rsd.form.Picker', {
extend: 'Rsd.form.Input',
requires:[],
xtype: 'picker',
//height: 30,
//widht: 80,
inputType:'text',
/*
click:方法可被注入
* */
handler: function () {
//console.log(this.getValue());
},
listeners:{
'blur':{
element:'ctrl',
fn:function (sender,event) {
var me = this;
//blur 事件在 click事件先发生，所以延时处理关闭
setTimeout(function(){
if(!me.selector.cancelHide )
{
me.selector.hide(50,function () {
//注销 全局事件click
Rsd.events.remove(Rsd,'click',me.selector.id);
});
}
me.selector.cancelHide = false;
},500);
return true;
}
},
'focus':{
element:'ctrl',
fn:function (sender,event) {
if(this.readOnly)
{
return true;
}
//判断事件 来源
if(event.sourceCapabilities == null) {
return true;
}
var me = this;
event.isCancel = true;
me.selector.cancelHide = false;
if (me.selector) {
//
var _style = {top:null,left:null};
var _left = ((me.label.width ? me.label.width : me.label.element.clientWidth) + 10);
_style.marginLeft = _left + 'px';
_style.marginTop = (me.height - parseInt(me.dom.style.marginBottom)) + 'px';
_style.tabIndex = me.tabIndex;
me.selector.setElStyle('dom',_style);
me.selector.show(null, 0, function () {
var _selector = me.selector;
//注册全局click 事件延时加入 队列 防止click 事件 关闭显示
setTimeout(function(){
Rsd.events.add(Rsd, 'click', _selector.id, function (e) {
if(e.target == me.ctrl.element || e.target == _selector)
{
//根据事件注册规则，返回flase 不移除注册方法
return false;
}
_selector.hide(10,function () {
Rsd.events.remove(Rsd,'click',_selector.id);
});
}, true);
},100);
});
}
return true;
}
},
'keyup':{
element:'ctrl',
fn:function (sender,event) {
if (event.code == 'Enter')
{
var me = this;
this.selector.hide(500,function () {
//注销 全局事件click
Rsd.events.remove(Rsd,'click',me.selector.id);
});
}
if (event.code == 'Escape')
{
var me = this;
this.selector.hide(500),function () {
//注销 全局事件click
Rsd.events.remove(Rsd,'click',me.selector.id);
};
}
if (event.code == 'ArrowUp')
{
}
if (event.code == 'ArrowDown')
{
}
}
}
},
/**
* @description 选择框面版样式
* */
panelStyle:{ },
/**
* 全选信息
*/
selectAll:{text:'全 选',value:0},
/*
*/
textMember:'text',
valueMember:'value',
/**
数据源
*/
dataSource:null,
/**
* */
constructor: function Picker(config) {
config = config || {};
this.apply(config);
},
/**
*
*/
onAfterInit:function onAfterInit() {
this.callParent();
this.ctrl.element.readOnly = true;
var me = this;
if (Rsd.isEmpty(this.selector)) {
this.selector = Rsd.create('Rsd.container.TipBox', {
layout:'vbox',
parent:me.dom,
style:Rsd.apply({
width: 350,
height: 320
},me.panelStyle),
listeners: {
'click': {
element: 'dom',
fn: function (sender, event) {
//在选择器控件自己上发生的click事件，导致录入框blur事件发生，阻止选择器关闭
me.selector.cancelHide = true;
event.isCancel = true;
return false;
}
}
},
items:[
{
flex:1,
xtype:'container',
bodyTagName:'div',
onchange:function (date) {
me.setValue(date);
}
},
{
height:55,
width:120,
margin:'10 0 10 10',
xtype:'button',
text:me.selectAll.text
}
],
loadData:function loadData(data) {
Rsd.empty(me.selector.items[0].body);
var ol = document.createElement('ol');
var style = {display:'flex',flexFlow:'row',flexWrap:'wrap',listStyleType:'none',padding:'0px 0px 0px 10px',margin:'0px'};
Rsd.setElStyle(ol,style)
me.dataSource = data ||[];
var list = me.dataSource;
for (var i in list) {
var li = document.createElement('li');
li.tag = list[i];
li.id = list[i][me.valueMember];
var span = document.createElement('span');
span.style.textAlign = 'center';
span.style.height = '35px';
span.style.lineHeight = '35px';
span.style.width = '65px';
span.style.display = 'block';
span.style.margin = '1px';
span.style.color= '#fff';
span.style.backgroundColor= '#0a121c87';
span.onclick = function (evt) {
var tag = this.parentElement.tag;
tag['IsSelected'] = !tag['IsSelected'];
this.style.backgroundColor = tag['IsSelected']? "#0a32c5e6":'#0a121c87';
me.ctrl.element.value = me.getText();
//根据事件注册规则，返回flase 不移除注册方法
return false;
}
span.appendChild(document.createTextNode(list[i][me.textMember]));
li.appendChild(span);
ol.appendChild(li);
}
me.log(me.selector.items[0].body);
me.selector.items[0].body.element.appendChild(ol);
}
});
}
setTimeout(function () {
me.loadData(me.dataSource);
},10);
},
/**
*可通过 重写该方法，定制多选框
*
* */
loadData:function loadData(data) {
var me = this;
me.dataSource = data ||[];
var list = me.dataSource;
me.selector.loadData(list);
},
/**
*
* */
getText:function getText() {
var _list = Rsd.select(this.selector,'li');
var _temp = [];
for(var i in _list)
{
if(_list[i].tag['IsSelected'])
{
_temp.push(_list[i].tag[this.textMember]);
}
}
if(_temp.length > 0 )
{
return _temp.join(',');
}
//全选
if( this.value == this.selectAll.value )
{
return this.selectAll.text;
}
if( Rsd.isArray(this.value) && Rsd.isArray(this.selectAll.value) && this.value.length == 0 && this.selectAll.value.length ==0 )
{
return this.selectAll.text;
}
return ""
},
/*
* 参数 value 格式：逗号分隔在字符串 或 item 的 value值数据组
* */
setValue:function setValue(value)
{
if(value == undefined || value == null )
{
this.ctrl.element.value="";
this.__value = null;
return;
}
var _value = value ;
if(Rsd.isString(_value)) {
_value = _value.split(',');
}
if(Rsd.isArray(_value))
{
//设置li 被选中
var list = Rsd.select(this.selector,'li');
for(var i in list)
{
list[i].tag["IsSelected"] = _value.indexOf(list[i].id)>-1
}
}
this.__value = _value;
this.ctrl.element.value = this.getText();
},
/**
*
* */
getValue:function getValue() {
var _temp = [];
var list = Rsd.select(this.selector,'li');
for(var i in list)
{
if(list[i].tag && list[i].tag['IsSelected'])
{
_temp.push(list[i].tag[this.valueMember]);
}
}
if(_temp.length > 0)
{
this.__value = _temp;
//console.log(_temp);
}
return this.__value ;
},
/**
*
*/
checkValue:function checkValue() {
return true;
}
},function(type){
this.defineProperty(type,'selector',function(){return this["selector_"+this.id];},function(selector){
this["selector_" + this.id] = selector;
},false);
});