/**
* @description 多个图片选择控件【从服务端选择图片】
* */
Rsd.define('Rsd.form.Images', {
extend: 'Rsd.control.ListView',
requires:['Rsd.form.Image'],
xtype: 'images',
ctrlTagName: 'div',
ctrlCls: 'x-control-images',
dataIndex:'',
clip:null,
/**
* @description 是否是只读模式
* */
readOnly:false,
/**
* @description image/jpeg, image/x-png, image/gif
* */
accept:'*/*',
/**
*
*/
border:true,
/**
* 控件的背景图片，false 或者 none 表示不设置背景图片
*/
backgroundImage:false,
/**
* @description value 值格式化字符串
* */
formatString:null,
/**
* @description 允许看大图
* */
zoomView:true,
/**
* 图片最多数量
*/
maxLength:4,
/**
* 自定义选择事件
* */
onselect:null,
/**
* 自定义删除事件
*/
ondelete:null,
/**
* 选择的文件发生改变
*/
onchange:null,
/*
* */
constructor: function Images(config) {
this.apply(config||{});
},
/**
*
*/
onAfterInit:function onAfterInit()
{
this.callParent();
if(this.value)
{
this.setValue(this.value);
}
},
/**
*
* @param {Array} value 图片URL数组
*/
setValue:function (value)
{
var me = this;
var _value = value||this.value;
var urls =[];
var items = [];
if(Rsd.isString(_value))
{
urls.push(_value);
}
if(Rsd.isArray(_value))
{
urls = _value;
}
for(var i in urls)
{
items.push(
{
xtype:'image',
width:'100%',
height:'100%',
label:null,
src: Rsd.isObject(urls[i])?urls[i].src:urls[i],
readOnly:me.readOnly,
border:me.border,
parent:me,
onselect:'selectImagsFromAlbums',
onview:'viewAllImages'
}
);
}
if(!me.readOnly)
{
for(var i =items.length;i< me.maxLength;i++)
{
items.push(
{
xtype:'image',
width:'100%',
height:'100%',
label:null,
src: '#',
border:me.border,
readOnly:me.readOnly,
parent:me,
onselect:'selectImagsFromAlbums'
}
);
}
}
this.loadData(items);
},
/***
*
*/
selectImagsFromAlbums:function selectImagsFromAlbums()
{
var me = this;
var _d = Rsd.create('Rsd.tool.ImageSelector', {
title:'图片选择',
mode:'dialog',
closeBtn:true,
draggable:true,
readOnly: false,
parent: me,
services:me.selectorServices,
//选择图片后回调处理
callback: function(item){
me.setValue(item["Url"]);
} });
_d.showDialog().load();
},
/**
*
*/
viewAllImages:function viewAllImages(sender,evt)
{
var _value = sender.parent.getValue();
var urls =[];
if(Rsd.isString(_value))
{
urls.push(_value);
}
if(Rsd.isArray(_value))
{
urls = _value;
}
var imgs = [];
for(var i in urls)
{
imgs.push({src:urls[i],text: ""});
}
var _view = Rsd.create('Rsd.widget.ImageViewer',{title:''});
_view.showDialog(this.parent).loadData(imgs);
},
/*
* */
getValue:function getValue() {
return this.value;
},
/*
*
* */
makeControl:function makeControl(config,row)
{
function formatTemplateString(str,row)
{ //debugger;
var html = "";
var arr = str.split('#');
var _c_str = null;
var _n_str = null;
for(var i=0 ;i< arr.length;i++)
{
_c_str = arr[i];
if(_c_str == undefined)
{
continue;
}
if( _c_str.startWith('=') && _c_str.endWith('='))
{
if(row.hasOwnProperty(_c_str.replaceByRegExp("=","")))
{
html += row[_c_str.replaceByRegExp("=","")] ;
}
else
{
if(Rsd.app.hasOwnProperty(_c_str.replaceByRegExp("=","")))
{
html += Rsd.app[_c_str.replaceByRegExp("=","")] ;
}
}
continue;
}
html += _c_str;
if(i < (arr.length -1) )
{
_n_str = arr[i+1];
if(_n_str == undefined || !( _n_str.startWith('=') && _n_str.endWith('=')))
{
html +='#';
}
}
}
return html;
}
var me = this;
me.timer = (me.timer||10) + 0;
if(me.timer > 3000)
{
me.timer=10;
}
var _config = config ||{};
//var _editable = _config.editable;
var _value = row[_config.dataIndex||_config.name];
var _h = _config.height || 50;
var _w = _config.width || 50;
var _ctrl = document.createElement('img');
setTimeout(function () {
var _src = '';
if(_value &&_value.startWith('http://'))
{
_src = _value;
}else
{
_src = formatTemplateString(_config.formatString,row);
}
var list = _src.split('http://');
if(list.length > 2)
{
_ctrl.src = list[list.length -1];
}else {
_ctrl.src = _src;
}
},me.timer);
if(_config.clip)
{
_ctrl.style.clip = _config.clip;
}
_ctrl.width =_w;
_ctrl.height = _h;
return _ctrl;
}
});