* @extends Roo.bootstrap.Component
* Bootstrap DocumentManager class
* @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} toolTipName default 'filename'
* @cfg {String} method default POST
* @cfg {String} url action url
* @cfg {Number} boxes number of boxes, 0 is no limit.. default 0
* @cfg {Number} labelWidth default 4
* @cfg {String} labelAlign (left|top) default left
* @cfg {Boolean} editable (true|false) allow edit when upload a image default true
+* @cfg {Number} labellg set the width of label (1-12)
+ * @cfg {Number} labelmd set the width of label (1-12)
+ * @cfg {Number} labelsm set the width of label (1-12)
+ * @cfg {Number} labelxs set the width of label (1-12)
*
* @constructor
* Create a new DocumentManager
* @param {Roo.bootstrap.DocumentManager} this
* @param {Object} file
*/
- "process" : true
+ "process" : true,
+ /**
+ * @event previewrendered
+ * Fire when preview rendered
+ * @param {Roo.bootstrap.DocumentManager} this
+ * @param {Object} file
+ */
+ "previewrendered" : true,
+ /**
+ */
+ "previewResize" : true
});
};
method : 'POST',
url : '',
paramName : 'imageUpload',
+ toolTipName : 'filename',
fieldLabel : '',
labelWidth : 4,
labelAlign : 'left',
editable : true,
delegates : false,
-
-
xhr : false,
+ labellg : 0,
+ labelmd : 0,
+ labelsm : 0,
+ labelxs : 0,
+
getAutoCreate : function()
{
var managerWidget = {
content = [
{
tag : 'div',
- cls : 'column col-md-' + this.labelWidth,
+ cls : 'column',
html : this.fieldLabel
},
{
tag : 'div',
- cls : 'column col-md-' + (12 - this.labelWidth),
+ cls : 'column',
cn : managerWidget
}
];
+ if(this.labelWidth > 12){
+ content[0].style = "width: " + this.labelWidth + 'px';
+ }
+
+ if(this.labelWidth < 13 && this.labelmd == 0){
+ this.labelmd = this.labelWidth;
+ }
+
+ if(this.labellg > 0){
+ content[0].cls += ' col-lg-' + this.labellg;
+ content[1].cls += ' col-lg-' + (12 - this.labellg);
+ }
+
+ if(this.labelmd > 0){
+ content[0].cls += ' col-md-' + this.labelmd;
+ content[1].cls += ' col-md-' + (12 - this.labelmd);
+ }
+
+ if(this.labelsm > 0){
+ content[0].cls += ' col-sm-' + this.labelsm;
+ content[1].cls += ' col-sm-' + (12 - this.labelsm);
+ }
+
+ if(this.labelxs > 0){
+ content[0].cls += ' col-xs-' + this.labelxs;
+ content[1].cls += ' col-xs-' + (12 - this.labelxs);
+ }
+
}
}
this.progressDialog = new Roo.bootstrap.Modal({
cls : 'roo-document-manager-progress-dialog',
allow_close : false,
+ animate : false,
title : '',
buttons : [
{
{
this.selectorEl.dom.value = '';
- if(!this.files.length){
+ if(!this.files || !this.files.length){
return;
}
var options = {
file : file,
manually : false
- }
+ };
if(this.fireEvent('prepare', this, formData, options) != false){
- Roo.log(options);
+ if(options.manually){
+ return;
+ }
this.xhr.send(formData);
return;
return file;
}
+ var img_src = encodeURI(baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename);
+
var previewEl = this.managerEl.createChild({
tag : 'div',
cls : 'roo-document-manager-preview',
cn : [
{
tag : 'div',
- tooltip : file.filename,
+ tooltip : file[this.toolTipName],
cls : 'roo-document-manager-thumb',
- html : '<img src="' + baseURL +'/Images/Thumb/' + this.thumbSize + '/' + file.id + '/' + file.filename + '">'
+ html : '<img tooltip="' + file[this.toolTipName] + '" src="' + img_src + '">'
},
{
tag : 'button',
image.on('click', this.onClick, this, file);
+ this.fireEvent('previewrendered', this, file);
+
return file;
},
var width = image.dom.naturalWidth || image.dom.width;
var height = image.dom.naturalHeight || image.dom.height;
+ if(!this.previewResize) {
+ return;
+ }
+
if(width > height){
file.target.addClass('wide');
return;
formData.append('mimetype', file.mimetype);
}
+ Roo.log(formData);
+
if(this.fireEvent('prepare', this, formData) != false){
this.xhr.send(formData);
};