From 89ac6704f3ddbe4b52b3b8da0cd10daf2c547ae3 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Fri, 13 Nov 2020 16:13:23 +0800 Subject: [PATCH] sync --- Roo/bootstrap/DropTarget.js | 29 +- buildSDK/dependancy_bootstrap.txt | 4 + css-bootstrap4/bootstrap.css.map | 2 +- css-bootstrap4/bootstrap.min.css.map | 2 +- css-bootstrap4/roojs-bootstrap-debug.css.map | 2 +- css-bootstrap4/roojs-bootstrap.css.map | 2 +- docs/json/roodata.json | 448 +++++++++++++++++++ docs/src/Roo_bootstrap_Card.js.html | 123 ++++- docs/symbols/Roo.bootstrap.Card.json | 28 ++ docs/tree.json | 5 + examples/bootstrap/dashboard4.bjs | 108 ++--- examples/bootstrap/dashboard4.js | 120 +++-- 12 files changed, 726 insertions(+), 147 deletions(-) diff --git a/Roo/bootstrap/DropTarget.js b/Roo/bootstrap/DropTarget.js index 7a085f9b79..5d85006fbf 100644 --- a/Roo/bootstrap/DropTarget.js +++ b/Roo/bootstrap/DropTarget.js @@ -46,35 +46,44 @@ Roo.extend(Roo.bootstrap.DropTarget, Roo.bootstrap.Element, { this.dropZone = new Roo.dd.DropTarget(this.getEl(), { ddGroup: this.name, listeners : { - drop : this.onDrop, - enter : this.onEnter, - out : this.onOut, - over : this.onOver + drop : this.dragDrop.createDelegate(this), + enter : this.dragEnter.createDelegate(this), + out : this.dragOut.createDelegate(this), + over : this.dragOver.createDelegate(this) } + }); - + this.dropZone.DDM.useCache = false // so data gets refreshed when we resize stuff }, - onDrop : function(source,e,data) + dragDrop : function(source,e,data) { // user has to decide how to impliment this. - this.fireEvent('drop', this, source, e ,data); + Roo.log('drop'); + Roo.log(this); + //this.fireEvent('drop', this, source, e ,data); return false; }, - onEnter : function(source) + dragEnter : function(n, dd, e, data) { // probably want to resize the element to match the dropped element.. Roo.log("enter"); + this.originalSize = this.el.getSize(); + this.el.setSize( n.el.getSize()); + this.dropZone.DDM.refreshCache(this.name); + Roo.log([n, dd, e, data]); }, - onOut : function(value) + dragOut : function(value) { // resize back to normal Roo.log("out"); + this.el.setSize(this.originalSize); + this.dropZone.resetConstraints(); }, - onOver : function() + dragOver : function() { // ??? do nothing? } diff --git a/buildSDK/dependancy_bootstrap.txt b/buildSDK/dependancy_bootstrap.txt index b0c25d508d..e123b4620c 100644 --- a/buildSDK/dependancy_bootstrap.txt +++ b/buildSDK/dependancy_bootstrap.txt @@ -1,6 +1,10 @@ + + Roo.bootstrap.version +Roo.Shadow + Roo.bootstrap.Component Roo.bootstrap.Element Roo.bootstrap.DropTarget diff --git a/css-bootstrap4/bootstrap.css.map b/css-bootstrap4/bootstrap.css.map index bb4e9b7bc2..2a0a0c2057 100644 --- a/css-bootstrap4/bootstrap.css.map +++ b/css-bootstrap4/bootstrap.css.map @@ -2,7 +2,7 @@ "version": 3, "file": "bootstrap.css", "sources": [ - "../../../../../tmp/scssWfRzkD", + "../../../../../tmp/scssLuSgMl", "../scss/bootstrap/_functions.scss", "../scss/bootstrap/_variables.scss", "../scss/bootstrap/bootstrap.scss", diff --git a/css-bootstrap4/bootstrap.min.css.map b/css-bootstrap4/bootstrap.min.css.map index f498e2955f..3548b1b295 100644 --- a/css-bootstrap4/bootstrap.min.css.map +++ b/css-bootstrap4/bootstrap.min.css.map @@ -2,7 +2,7 @@ "version": 3, "file": "bootstrap.min.css", "sources": [ - "../../../../../tmp/scssWfRzkD", + "../../../../../tmp/scssLuSgMl", "../scss/bootstrap/_functions.scss", "../scss/bootstrap/_variables.scss", "../scss/bootstrap/bootstrap.scss", diff --git a/css-bootstrap4/roojs-bootstrap-debug.css.map b/css-bootstrap4/roojs-bootstrap-debug.css.map index d3d07d0d45..ddcee09e58 100644 --- a/css-bootstrap4/roojs-bootstrap-debug.css.map +++ b/css-bootstrap4/roojs-bootstrap-debug.css.map @@ -2,7 +2,7 @@ "version": 3, "file": "roojs-bootstrap-debug.css", "sources": [ - "../../../../../tmp/scssrewIJB", + "../../../../../tmp/scssFRiEBj", "../scss/bootstrap/_functions.scss", "../scss/bootstrap/_variables.scss", "../scss/roojs-bootstrap/roojs-bootstrap.scss", diff --git a/css-bootstrap4/roojs-bootstrap.css.map b/css-bootstrap4/roojs-bootstrap.css.map index 267145b4be..bb28d29aef 100644 --- a/css-bootstrap4/roojs-bootstrap.css.map +++ b/css-bootstrap4/roojs-bootstrap.css.map @@ -2,7 +2,7 @@ "version": 3, "file": "roojs-bootstrap.css", "sources": [ - "../../../../../tmp/scssrewIJB", + "../../../../../tmp/scssFRiEBj", "../scss/bootstrap/_functions.scss", "../scss/bootstrap/_variables.scss", "../scss/roojs-bootstrap/roojs-bootstrap.scss", diff --git a/docs/json/roodata.json b/docs/json/roodata.json index c1c972fb8d..08947b175d 100644 --- a/docs/json/roodata.json +++ b/docs/json/roodata.json @@ -19893,6 +19893,14 @@ "static" : false, "memberOf" : "Roo.bootstrap.Component" }, + { + "name" : "getDropPoint", + "type" : "function", + "desc" : "Decide whether to drop above or below a View node.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "" + }, { "name" : "getEl", "type" : "function", @@ -19909,6 +19917,14 @@ "static" : false, "memberOf" : "Roo.Component" }, + { + "name" : "getTargetFromEvent", + "type" : "function", + "desc" : "Part of the Roo.dd.DropZone interface. If no target node is found, the\n\twhole Element becomes the target, and this causes the drop gesture to append.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "" + }, { "name" : "getVisibilityEl", "type" : "function", @@ -27618,6 +27634,438 @@ } ] }, + "Roo.bootstrap.DropTarget" : { + "props" : [ + { + "name" : "actionMode", + "type" : "String", + "desc" : "which property holds the element that used for hide() / show() / disable() / enable()\ndefault is 'el' for forms you probably want to set this to fieldEl", + "memberOf" : "Roo.Component" + }, + { + "name" : "allowDomMove", + "type" : "Boolean", + "desc" : "Whether the component can move the Dom node when rendering (defaults to true).", + "memberOf" : "Roo.Component" + }, + { + "name" : "can_build_overlaid", + "type" : "Boolean", + "desc" : "True if element can be rebuild from a HTML page", + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "clickable", + "type" : "Boolean", + "desc" : "e) default false", + "memberOf" : "Roo.bootstrap.Element", + "optvals" : [ + "true", + "false" + ] + }, + { + "name" : "cls", + "type" : "String", + "desc" : "class of the element", + "memberOf" : "Roo.bootstrap.Element" + }, + { + "name" : "container_method", + "type" : "string", + "desc" : "method to fetch parents container element (used by NavHeaderbar - getHeaderChildContainer)", + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "dataId", + "type" : "string", + "desc" : "cutomer id", + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "disableClass", + "type" : "String", + "desc" : "CSS class added to the component when it is disabled (defaults to \"x-item-disabled\").", + "memberOf" : "Roo.Component" + }, + { + "name" : "hideMode", + "type" : "String", + "desc" : "y)\nHow this component should hidden. Supported values are\n\"visibility\" (css visibility), \"offsets\" (negative offset position) and\n\"display\" (css display) - defaults to \"display\".", + "memberOf" : "Roo.Component", + "optvals" : [ + "display", + "visibility" + ] + }, + { + "name" : "html", + "type" : "String", + "desc" : "contents of the element", + "memberOf" : "Roo.bootstrap.Element" + }, + { + "name" : "listeners", + "type" : "Object", + "desc" : "list of events and functions to call for this object, \nFor example :\n
\n    listeners :  { \n       'click' : function(e) {\n           ..... \n        } ,\n        .... \n    } \n
", + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "name", + "type" : "string", + "desc" : "dropable name", + "memberOf" : "" + }, + { + "name" : "preventDefault", + "type" : "Boolean", + "desc" : "e) default false", + "memberOf" : "Roo.bootstrap.Element", + "optvals" : [ + "true", + "false" + ] + }, + { + "name" : "style", + "type" : "String", + "desc" : "any extra css", + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "tag", + "type" : "String", + "desc" : "tag of the element", + "memberOf" : "Roo.bootstrap.Element" + }, + { + "name" : "tooltip", + "type" : "string", + "desc" : "Text for the tooltip", + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "visibilityEl", + "type" : "string|object", + "desc" : "t) What element to use for visibility (@see getVisibilityEl())", + "memberOf" : "Roo.bootstrap.Component", + "optvals" : [ + "el", + "parent" + ] + }, + { + "name" : "xattr", + "type" : "Object", + "desc" : "extra attributes to add to 'element' (used by builder to store stuff.)", + "memberOf" : "Roo.bootstrap.Component" + } + ], + "events" : [ + { + "name" : "beforedestroy", + "type" : "function", + "desc" : "Fires before the component is destroyed. Return false to stop the destroy.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "beforehide", + "type" : "function", + "desc" : "Fires before the component is hidden. Return false to stop the hide.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "beforerender", + "type" : "function", + "desc" : "Fires before the component is rendered. Return false to stop the render.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "beforeshow", + "type" : "function", + "desc" : "Fires before the component is shown. Return false to stop the show.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "childrenrendered", + "type" : "function", + "desc" : "Fires when the children have been rendered..", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "click", + "type" : "function", + "desc" : "When a element is chick", + "sig" : "function (_self, e)\n{\n\n}", + "memberOf" : "" + }, + { + "name" : "destroy", + "type" : "function", + "desc" : "Fires after the component is destroyed.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "disable", + "type" : "function", + "desc" : "Fires after the component is disabled.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "enable", + "type" : "function", + "desc" : "Fires after the component is enabled.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "hide", + "type" : "function", + "desc" : "Fires after the component is hidden.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "render", + "type" : "function", + "desc" : "Fires after the component is rendered.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + }, + { + "name" : "show", + "type" : "function", + "desc" : "Fires after the component is shown.", + "sig" : "function (_self)\n{\n\n}", + "memberOf" : "Roo.Component" + } + ], + "methods" : [ + { + "name" : "addEvents", + "type" : "function", + "desc" : "Used to define events on this Observable", + "sig" : "(object)", + "static" : false, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "addListener", + "type" : "function", + "desc" : "Appends an event handler to this component", + "sig" : "(eventName, handler, scope, options)", + "static" : false, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "capture", + "type" : "function", + "desc" : "Starts capture on the specified Observable. All events will be passed\nto the supplied function with the event name + standard signature of the event\nbefore the event is fired. If the supplied function returns false,\nthe event will not fire.", + "sig" : "(o, fn, scope)", + "static" : true, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "destroy", + "type" : "function", + "desc" : "Destroys this component by purging any event listeners, removing the component's element from the DOM,\nremoving the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "disable", + "type" : "function", + "desc" : "Disable this component.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "enable", + "type" : "function", + "desc" : "Enable this component.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "fireEvent", + "type" : "function", + "desc" : "Fires the specified event with the passed parameters (minus the event name).", + "sig" : "(eventName, args)", + "static" : false, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "focus", + "type" : "function", + "desc" : "Try to focus this component.", + "sig" : "(selectText)", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "getChildContainer", + "type" : "function", + "desc" : "Fetch the element to add children to", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "getEl", + "type" : "function", + "desc" : "Returns the underlying {@link Roo.Element}.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "getId", + "type" : "function", + "desc" : "Returns the id of this component.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "getVisibilityEl", + "type" : "function", + "desc" : "Get the element that will be used to show or hide", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "hasListener", + "type" : "function", + "desc" : "Checks to see if this object has any listeners for a specified event", + "sig" : "(eventName)", + "static" : false, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "hide", + "type" : "function", + "desc" : "Hide a component - adds 'hidden' class", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "initEvents", + "type" : "function", + "desc" : "Initialize Events for the element", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "isVisible", + "type" : "function", + "desc" : "Returns true if this component is visible.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "on", + "type" : "function", + "desc" : "Appends an event handler to this element (shorthand for addListener)", + "sig" : "(eventName, handler, scope, options)", + "static" : false, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "purgeListeners", + "type" : "function", + "desc" : "Removes all listeners for this object", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "releaseCapture", + "type" : "function", + "desc" : "Removes all added captures from the Observable.", + "sig" : "(o)", + "static" : true, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "removeListener", + "type" : "function", + "desc" : "Removes a listener", + "sig" : "(eventName, handler, scope)", + "static" : false, + "memberOf" : "Roo.util.Observable" + }, + { + "name" : "render", + "type" : "function", + "desc" : "If this is a lazy rendering component, render it to its container element.", + "sig" : "(container)", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "setDisabled", + "type" : "function", + "desc" : "Convenience function for setting disabled/enabled by boolean.", + "sig" : "(disabled)", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "setVisibilityEl", + "type" : "function", + "desc" : "Set the element that will be used to show or hide", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "setVisible", + "type" : "function", + "desc" : "Convenience function to hide or show this component by boolean.", + "sig" : "(visible)", + "static" : false, + "memberOf" : "Roo.Component" + }, + { + "name" : "show", + "type" : "function", + "desc" : "Show a component - removes 'hidden' class", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "tooltipEl", + "type" : "function", + "desc" : "Fetch the element to display the tooltip on.", + "sig" : "()\n{\n\n}", + "static" : false, + "memberOf" : "Roo.bootstrap.Component" + }, + { + "name" : "un", + "type" : "function", + "desc" : "Removes a listener (shorthand for removeListener)", + "sig" : "(eventName, handler, scope)", + "static" : false, + "memberOf" : "Roo.util.Observable" + } + ] + }, "Roo.bootstrap.Element" : { "props" : [ { diff --git a/docs/src/Roo_bootstrap_Card.js.html b/docs/src/Roo_bootstrap_Card.js.html index f0b093efbf..c95594ea8b 100644 --- a/docs/src/Roo_bootstrap_Card.js.html +++ b/docs/src/Roo_bootstrap_Card.js.html @@ -45,7 +45,9 @@ * @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 + * @config {String} drag_group group for drag + * @config {Boolean} dropable if this card can recieve other cards being dropped onto it.. + * @config {String} drop_group group for drag * * @constructor @@ -99,7 +101,8 @@ dragable : false, drag_group : false, - + dropable : false, + drop_group : false, childContainer : false, layoutCls : function() @@ -279,14 +282,26 @@ initEvents: function() { - if(this.dragable){ - this.dragZone = new Roo.dd.DragZone(this.getEl(), { + + this.bodyEl = this.getChildContainer(); + 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); } - + if (this.dropable) { + this.dropZone = new Roo.dd.DropZone(this.getChildContainer(), { + containerScroll: true, + ddGroup: this.drop_group || 'default_card_drag_group' + }); + this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this); + this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this); + this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this); + this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this); + this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this); + } }, @@ -310,7 +325,103 @@ return dragData; } return false; - } + }, + /** + * Part of the Roo.dd.DropZone interface. If no target node is found, the + * whole Element becomes the target, and this causes the drop gesture to append. + */ + getTargetFromEvent : function(e) + { + var target = e.getTarget(); + while ((target !== null) && (target.parentNode != this.bodyEl.dom)) { + target = target.parentNode; + } + // see if target is one of the 'cards'... + var ctarget = false; + var cards = []; + for (var i = 0;i< this.items.length;i++) { + if (this.items[i].xtype != 'Card') { + continue; + } + cards.push(this.items[i].el.dom) + if (target == this.items[i].el.dom) { + ctarget = target; + } + } + + if (!ctarget) { + ctarget = cards[cards.length-1] || this.el.dom; + } + + + Roo.log(['getTargetFromEvent', ctarget]); + return ctarget; + }, + + onNodeEnter : function(n, dd, e, data){ + return false; + }, + onNodeOver : function(n, dd, e, data) + { + var pt = this.getDropPoint(e, n, dd); + // set the insert point style on the target node + //var dragElClass = this.dropNotAllowed; + if (pt) { + Roo.log(pt); + } + return false; //dragElClass; + }, + onNodeOut : function(n, dd, e, data){ + //this.removeDropIndicators(n); + }, + onNodeDrop : function(n, dd, e, data) + { + return false; + + if (this.fireEvent("drop", this, n, dd, e, data) === false) { + return false; + } + var pt = this.getDropPoint(e, n, dd); + var insertAt = (n == this.bodyEl.dom) ? this.items.length : n.nodeIndex; + if (pt == "below") { + insertAt++; + } + for (var i = 0; i < this.items.length; i++) { + var r = this.items[i]; + //var dup = this.store.getById(r.id); + if (dup && (dd != this.dragZone)) { + Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1); + } else { + if (data.copy) { + this.store.insert(insertAt++, r.copy()); + } else { + data.source.isDirtyFlag = true; + r.store.remove(r); + this.store.insert(insertAt++, r); + } + this.isDirtyFlag = true; + } + } + this.dragZone.cachedTarget = null; + return true; + }, + + /** Decide whether to drop above or below a View node. */ + getDropPoint : function(e, n, dd) + { + if (n == this.bodyEl.dom) { + return "above"; + } + var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight; + var c = t + (b - t) / 2; + var y = Roo.lib.Event.getPageY(e); + if(y <= c) { + return "above"; + }else{ + return "below"; + } + }, + }); diff --git a/docs/symbols/Roo.bootstrap.Card.json b/docs/symbols/Roo.bootstrap.Card.json index 8695b20d17..f1607609a2 100644 --- a/docs/symbols/Roo.bootstrap.Card.json +++ b/docs/symbols/Roo.bootstrap.Card.json @@ -490,6 +490,34 @@ } ], "methods" : [ + { + "name" : "getDropPoint", + "desc" : "Decide whether to drop above or below a View node.", + "isStatic" : false, + "isConstructor" : false, + "isPrivate" : false, + "memberOf" : "Roo.bootstrap.Card", + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "params" : [], + "returns" : [] + }, + { + "name" : "getTargetFromEvent", + "desc" : "Part of the Roo.dd.DropZone interface. If no target node is found, the\n\twhole Element becomes the target, and this causes the drop gesture to append.", + "isStatic" : false, + "isConstructor" : false, + "isPrivate" : false, + "memberOf" : "Roo.bootstrap.Card", + "example" : "", + "deprecated" : "", + "since" : "", + "see" : "", + "params" : [], + "returns" : [] + }, { "name" : "tooltipEl", "desc" : "Fetch the element to display the tooltip on.", diff --git a/docs/tree.json b/docs/tree.json index 4fce9b8646..048a168855 100644 --- a/docs/tree.json +++ b/docs/tree.json @@ -465,6 +465,11 @@ "cn" : [], "is_class" : true }, + { + "name" : "Roo.bootstrap.DropTarget", + "cn" : [], + "is_class" : true + }, { "name" : "Roo.bootstrap.Element", "cn" : [], diff --git a/examples/bootstrap/dashboard4.bjs b/examples/bootstrap/dashboard4.bjs index 494b55b665..32a1479641 100644 --- a/examples/bootstrap/dashboard4.bjs +++ b/examples/bootstrap/dashboard4.bjs @@ -28,80 +28,68 @@ "$ xns" : "Roo.bootstrap", "items" : [ { - "Number md" : 3, - "xtype" : "Column", + "String header" : "example 1", + "String footer" : "a footer", + "String cls" : "col-xs-12 column col-12", + "String weight" : "danger", + "xtype" : "Card", "$ xns" : "Roo.bootstrap", + "String style" : "max-width:300px;margin: 0 12px;", + "bool dropable" : true, + "string drop_group" : "cards", "items" : [ { - "String header" : "example 1", - "String footer" : "a footer", - "String weight" : "danger", + "String header" : "ticket 1", + "string drag_group" : "cards", + "String weight" : "light", + "String margin_bottom" : 3, "xtype" : "Card", "$ xns" : "Roo.bootstrap", - "String style" : " ", - "bool dropable" : true, - "string drop_group" : "cards", - "items" : [ - { - "String header" : "ticket 1", - "string drag_group" : "cards", - "String weight" : "light", - "String margin_bottom" : 3, - "xtype" : "Card", - "$ xns" : "Roo.bootstrap", - "String html" : "body goes here", - "bool dragable" : true - }, - { - "String header" : "ticket 1", - "string drag_group" : "cards", - "String weight" : "light", - "String margin_bottom" : 3, - "xtype" : "Card", - "$ xns" : "Roo.bootstrap", - "String html" : "body goes here", - "bool dragable" : true - }, - { - "String weight" : "primary", - "xtype" : "Button", - "$ xns" : "Roo.bootstrap", - "String html" : "Add Issue" - } - ] + "String html" : "body goes here", + "bool dragable" : true + }, + { + "String header" : "ticket 1", + "string drag_group" : "cards", + "String weight" : "light", + "String margin_bottom" : 3, + "xtype" : "Card", + "$ xns" : "Roo.bootstrap", + "String html" : "body goes here", + "bool dragable" : true + }, + { + "String weight" : "primary", + "xtype" : "Button", + "$ xns" : "Roo.bootstrap", + "String html" : "Add Issue" } ] }, { - "Number md" : 3, - "xtype" : "Column", + "String header" : "example 1", + "String footer" : "a footer", + "String cls" : "column col-xs-12 col-12", + "String weight" : "danger", + "xtype" : "Card", "$ xns" : "Roo.bootstrap", + "String style" : "max-width:300px;margin: 0 12px;", "items" : [ { - "String header" : "example 1", - "String footer" : "a footer", - "String weight" : "danger", + "String header" : "ticket 1", + "string drag_group" : "cards", + "String weight" : "light", + "String margin_bottom" : 3, "xtype" : "Card", "$ xns" : "Roo.bootstrap", - "String style" : " ", - "items" : [ - { - "String header" : "ticket 1", - "string drag_group" : "cards", - "String weight" : "light", - "String margin_bottom" : 3, - "xtype" : "Card", - "$ xns" : "Roo.bootstrap", - "String html" : "body goes here", - "bool dragable" : true - }, - { - "String weight" : "primary", - "xtype" : "Button", - "$ xns" : "Roo.bootstrap", - "String html" : "Add Issue" - } - ] + "String html" : "body goes here", + "bool dragable" : true + }, + { + "String weight" : "primary", + "xtype" : "Button", + "$ xns" : "Roo.bootstrap", + "String html" : "Add Issue" } ] } diff --git a/examples/bootstrap/dashboard4.js b/examples/bootstrap/dashboard4.js index 968e18065b..8d55f6fa54 100644 --- a/examples/bootstrap/dashboard4.js +++ b/examples/bootstrap/dashboard4.js @@ -41,89 +41,75 @@ dashboard4 = new Roo.XComponent({ '|xns' : 'Roo.bootstrap', items : [ { - xtype : 'Column', - md : 3, + xtype : 'Card', + cls : 'col-xs-12 column col-12', + dropable : true, + drop_group : 'cards', + footer : 'a footer', + header : _this._strings['e93b3fa481be3932aa08bd68c3deee70'] /* example 1 */, + style : 'max-width:300px;margin: 0 12px;', + weight : 'danger', xns : Roo.bootstrap, '|xns' : 'Roo.bootstrap', items : [ { xtype : 'Card', - dropable : true, - drop_group : 'cards', - footer : 'a footer', - header : _this._strings['e93b3fa481be3932aa08bd68c3deee70'] /* example 1 */, - style : ' ', - weight : 'danger', + dragable : true, + drag_group : 'cards', + header : _this._strings['d9fb0367346d21079a1c52d72da61c9f'] /* ticket 1 */, + html : _this._strings['60ee66eb2cd31823032664c2e9a79fd5'] /* body goes here */, + margin_bottom : 3, + weight : 'light', xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap', - items : [ - { - xtype : 'Card', - dragable : true, - drag_group : 'cards', - header : _this._strings['d9fb0367346d21079a1c52d72da61c9f'] /* ticket 1 */, - html : _this._strings['60ee66eb2cd31823032664c2e9a79fd5'] /* body goes here */, - margin_bottom : 3, - weight : 'light', - xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap' - }, - { - xtype : 'Card', - dragable : true, - drag_group : 'cards', - header : _this._strings['d9fb0367346d21079a1c52d72da61c9f'] /* ticket 1 */, - html : _this._strings['60ee66eb2cd31823032664c2e9a79fd5'] /* body goes here */, - margin_bottom : 3, - weight : 'light', - xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap' - }, - { - xtype : 'Button', - html : _this._strings['9cf863d802aca813531ca28b319ead90'] /* Add Issue */, - weight : 'primary', - xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap' - } - ] + '|xns' : 'Roo.bootstrap' + }, + { + xtype : 'Card', + dragable : true, + drag_group : 'cards', + header : _this._strings['d9fb0367346d21079a1c52d72da61c9f'] /* ticket 1 */, + html : _this._strings['60ee66eb2cd31823032664c2e9a79fd5'] /* body goes here */, + margin_bottom : 3, + weight : 'light', + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap' + }, + { + xtype : 'Button', + html : _this._strings['9cf863d802aca813531ca28b319ead90'] /* Add Issue */, + weight : 'primary', + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap' } ] }, { - xtype : 'Column', - md : 3, + xtype : 'Card', + cls : 'column col-xs-12 col-12', + footer : 'a footer', + header : _this._strings['e93b3fa481be3932aa08bd68c3deee70'] /* example 1 */, + style : 'max-width:300px;margin: 0 12px;', + weight : 'danger', xns : Roo.bootstrap, '|xns' : 'Roo.bootstrap', items : [ { xtype : 'Card', - footer : 'a footer', - header : _this._strings['e93b3fa481be3932aa08bd68c3deee70'] /* example 1 */, - style : ' ', - weight : 'danger', + dragable : true, + drag_group : 'cards', + header : _this._strings['d9fb0367346d21079a1c52d72da61c9f'] /* ticket 1 */, + html : _this._strings['60ee66eb2cd31823032664c2e9a79fd5'] /* body goes here */, + margin_bottom : 3, + weight : 'light', + xns : Roo.bootstrap, + '|xns' : 'Roo.bootstrap' + }, + { + xtype : 'Button', + html : _this._strings['9cf863d802aca813531ca28b319ead90'] /* Add Issue */, + weight : 'primary', xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap', - items : [ - { - xtype : 'Card', - dragable : true, - drag_group : 'cards', - header : _this._strings['d9fb0367346d21079a1c52d72da61c9f'] /* ticket 1 */, - html : _this._strings['60ee66eb2cd31823032664c2e9a79fd5'] /* body goes here */, - margin_bottom : 3, - weight : 'light', - xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap' - }, - { - xtype : 'Button', - html : _this._strings['9cf863d802aca813531ca28b319ead90'] /* Add Issue */, - weight : 'primary', - xns : Roo.bootstrap, - '|xns' : 'Roo.bootstrap' - } - ] + '|xns' : 'Roo.bootstrap' } ] } -- 2.39.2