/**
* Created by seeker910 on 2014/8/22.
*/
Rsd.define('Rsd.control.List', {
extend: 'Rsd.control.Component',
requires: ['Rsd.form.Label'],
xtype: 'list',
ctrlTagName: 'ol',
cls: 'x-list',
readOnly: false,
dataSource: [],
/**
* @description 键值字段名
* */
itemKeyMember: 'id',
/**
* 元素 默认类型
*/
itemXtype: null,
itemClick: null,
itemDblClick: null,
/**
* 单击时选中
*/
selectedOnClick: true,
/**
* 双击击时选中
*/
selectedOnDblClick: true,
/*
* */
itemSelectedCls: '',
/**
* @description item 默认样式 ,即dom li 样式
* */
//itemStyle: {height: '30px', lineHeight: '30px',float:'left'},
/**
* dom li class
*/
itemCls: null,
/*
* 启用hover样式
* */
itemHover: false,
/**
*
* @description items 布局方式
* */
//layout:'hbox',
//items:[],
/*
none:不使用项目符号
disc:实心圆，默认值
circle:空心圆
square:实心方块
decimal:阿拉伯数字
lower-roman:小写罗马数字
upper-roman:大写罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
*/
listType: 'none',
/*
* */
label: { position: 'top', align: 'center', height: 40 },
/*
*
* */
constructor: function ListView(config) {
config = config || {};
this.apply(config);
},
/**
*
*/
initComponentEx: function initComponentEx() {
this.callParent();
this.ctrl.element.style.listStyleType = this.listType;
this.ctrl.element.style.margin = '0px';
this.setElAttribute('dom', 'layout', this.layout);
},
/**
*@description control控件加载数据 无回调
@param {Array} data 数据源
@param {Array} callback 回调函数
* */
loadData: function loadData(data, callback) {
//this.log('loadData');
if (this.dataSource == data) {
//return;
}
this.dataSource = data || this.dataSource;
//this.log(this.dataSource);
if (Rsd.isArray(this.dataSource)) {
//console.log(this.dataSource);
this.removeAll();
for (var i in this.dataSource) {
var _item = this.newItem(this.dataSource[i]);
//
this.ctrl.element.appendChild(_item.element);
this.items.push(_item);
}
Rsd.callFunction(this, callback, [this.dataSource]);
}
else {
console.error('Rsd.control.List.loadData()方法的data参数必须是数组', this.dataSource);
}
return this;
},
/**
* @description 清空列表
* */
removeAll: function removeAll() {
if (this.ctrl.element) {
this.ctrl.element.innerHTML = "";
}
this.items = [];
},
/**
* @param key {int|string} int type is index value,string type is key value.
* */
select: function select(key, scroll) {
if (!this.ctrl.element) {
return;
}
if (Rsd.isString(key)) {
var list = Rsd.select(this.ctrl.element, '[id=' + key + ']');
if (list.length > 0) {
list[0].click();
}
return this;
}
if (Rsd.isNumber(key) && key < 0) {
var list = this.ctrl.element.querySelectorAll('.' + this.itemSelectedCls);
for (var i in list) {
this.removeCls(list[i], this.itemSelectedCls);
}
return this;
}
if (Rsd.isNumber(key) && key < this.items.length) {
var _index = key % this.items.length;
this.items[_index].element.click();
return this;
}
return this;
},
/**
*
* @description 选中节点滚动到可视区
* */
scrollCurrentIntoView: function (key, top) {
var dom = document.getElementById(key);
if (dom) {
dom.scrollIntoView(top);
}
},
/**
* @private 创建一个新的列表项 li
* */
newItem: function newItem(item) {
var me = this;
var _item = item || {};//item 是 li节点，item.content 是li内部子节点
if (Rsd.isString(item)) {
_item = {
innerCtrl:_item
};
}
if(!_item.innerCtrl)
{
_item.innerCtrl = me.createInnerControl(_item);
}
if (Rsd.isObject(item)) {
_item.key = _item[me.itemKeyMember];
}
//li 节点
if (!_item.element) {
_item.element = document.createElement('li');
}
if (_item.key) {
_item.element.setAttribute('id', _item.key);
}
if (me.itemStyle) {
var sizeUnit = me.sizeUnit || 'px';
Rsd.setElStyle(_item.element, me.itemStyle, sizeUnit);
}
if (me.itemHover) {
_item.element.classList.add('x-li-hover');
}
//
var innerCtrl = _item.innerCtrl;
//me.log('innerCtrl',Rsd.getType(_item.innerCtrl));
if(Rsd.isString(innerCtrl))
{
_item.element.appendChild( document.createTextNode(innerCtrl));
_item.element.style.alignSelf = 'center';
}
if(innerCtrl instanceof HTMLElement)
{
//me.log('HTMLElement');
_item.element.appendChild(innerCtrl);
//_item.element.style.display = 'flex';
_item.element.style.alignSelf = 'center';
}
if(innerCtrl instanceof Rsd.common.ComponentX)
{
//me.log('Rsd.common.ComponentX');
_item.element.style.flex = _item.flex;
_item.element.style.display = 'flex';
innerCtrl.parent = me;
innerCtrl.style.alignSelf = 'center';
innerCtrl.renderTo(_item.element).doLayout();
//_item.content = innerCtrl;
}
//
var el = _item.element;
el.onclick = function (e) {
if (me.selectedOnClick) {
if (!Rsd.isEmpty(me.itemSelectedCls)) {
var list = me.ctrl.element.querySelectorAll('.' + me.itemSelectedCls);
for (var i in list) {
me.removeCls(list[i], me.itemSelectedCls);
}
me.addCls(this, me.itemSelectedCls);
}
}
var _click = item.click || me.itemClick;
if (_click) {
me.funApplyByIOC(_click, [_item, e]);
}
};
el.ondblclick = function (e) {
if (me.selectedOnDblClick) {
if (!Rsd.isEmpty(me.itemSelectedCls)) {
var list = me.ctrl.element.querySelectorAll('.' + me.itemSelectedCls);
for (var i in list) {
me.removeCls(list[i], me.itemSelectedCls);
}
me.addCls(this, me.itemSelectedCls);
}
}
var _dblClick = item.dblClick || me.itemDblClick;
if (_dblClick) {
me.funApplyByIOC(_dblClick, [_item, e]);
}
};
return _item;
},
/**
*
*/
createInnerControl:function createInnerControl(config)
{
//console.log(content)
var me = this;
//li 内部 控件
var _config = config || 'no content';
if (Rsd.isString(_config)) {
var _txt = document.createTextNode(_config);
return _txt;
}
if (_config instanceof HTMLElement) {
return _config;
}
//debugger;
if (Rsd.isObject(_config)) {
var _xtype = _config.xtype || me.itemXtype || 'label';
if (_config.flex) {
delete _config[flex];
}
var ctrl = Rsd.widget(_xtype, _config);
return ctrl;
}
}
}, function (type) {
var _layoutGetter = function () {
return this.__layout || 'hbox';
};
var _layoutSetter = function (value) {
this.__layout = value;
};
this.defineProperty(type, "layout", _layoutGetter, _layoutSetter, false);
var _itemsGetter = function () {
this.__items = this.__items || [];
return this.__items;
};
var _itemsSetter = function (value) {
this.__items = value || [];
};
this.defineProperty(type, "items", _itemsGetter, _itemsSetter, true);
var _itemStyleGetter = function () {
if (!this.hasOwnProperty('__itemStyle')) {
switch (this.layout) {
case 'hbox':
this.__itemStyle = { "height": '30px', "lineHeight": '30px', "float": 'left' };
break;
case 'vhox':
this.__itemStyle = { "height": '30px', "lineHeight": '30px' };
break;
}
}
return this.__itemStyle;
};
var _itemStyleSetter = function (value) {
this.__itemStyle = Rsd.apply(this.itemStyle, value || {});
};
this.defineProperty(type, "itemStyle", _itemStyleGetter, _itemStyleSetter, true);
});