* @cfg {String} display_lg (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
* @cfg {String} display_xl (none|inline|inline-block|block|table|table-cell|table-row|flex|inline-flex)
+ * @config {Boolean} dragable if this card can be dragged.
+ * @config {Boolean} drag_group group for drag
+ *
+
* @constructor
* Create a new Container
* @param {Object} config The config object
title : '',
subtitle : '',
html : '',
+ footer: '',
+ dragable : false,
+ drag_group : false,
childContainer : false,
{
var cls = '';
var t = this;
-
+ Roo.log(this.margin_bottom.length);
['', 'top', 'bottom', 'left', 'right', 'x', 'y' ].forEach(function(v) {
// in theory these can do margin_top : ml-xs-3 ??? but we don't support that yet
- if (t['margin' + (v.length ? '_' : '') + v].length) {
+ if (('' + t['margin' + (v.length ? '_' : '') + v]).length) {
cls += ' m' + (v.length ? v[0] : '') + '-' + t['margin' + (v.length ? '_' : '') + v];
}
- if (t['padding' + (v.length ? '_' : '') + v].length) {
+ if (('' + t['padding' + (v.length ? '_' : '') + v]).length) {
cls += ' p' + (v.length ? v[0] : '') + '-' + t['padding' + (v.length ? '_' : '') + v];
}
});
['', 'xs', 'sm', 'lg', 'xl'].forEach(function(v) {
- if (t['display' + (v.length ? '_' : '') + v].length) {
- cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v].length
+ if (('' + t['display' + (v.length ? '_' : '') + v]).length) {
+ cls += ' d' + (v.length ? '-' : '') + v + '-' + t['margin' + (v.length ? '_' : '') + v]
}
});
};
if (this.weight.length && this.weight != 'light') {
- cfg.cls += ' text-white'
+ cfg.cls += ' text-white';
+ } else {
+ cfg.cls += ' text-dark'; // need as it's nested..
}
if (this.weight.length) {
cfg.cls += ' bg-' + this.weight;
cls : 'card-body',
cn : []
};
- cfg.push(body);
+ cfg.cn.push(body);
if (this.title.length) {
body.cn.push({
cls : 'roo-card-body-ctr'
});
+ if (this.html.length) {
+ body.cn.push({
+ tag: 'div',
+ html : this.html
+ });
+ }
// fixme ? handle objects?
if (this.footer.length) {
- body.cn.push({
+ cfg.cn.push({
tag : 'div',
cls : 'card-footer',
html: this.footer // escape?
return false;
}
return this.el.select('.roo-card-body-ctr',true).first();
- }
+ },
+
+ initEvents: function()
+ {
+ if(this.dragable){
+ this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+ containerScroll: true,
+ ddGroup: this.drag_group || 'default_card_drag_group'
+ });
+ this.dragZone.getDragData = this.getDragData.createDelegate(this);
+ }
+
+
+
+ },
+ getDragData : function(e) {
+ var target = this.getEl();
+ if (target) {
+ //this.handleSelection(e);
+
+ var dragData = {
+ source: this,
+ copy: false,
+ nodes: this.getEl(),
+ records: []
+ };
+
+
+ dragData.ddel = target.dom ; // the div element
+ Roo.log(target.getWidth( ));
+ dragData.ddel.style.width = target.getWidth() + 'px';
+
+ return dragData;
+ }
+ return false;
+ },
});