From c422dcd07483b2becc855f36a45cf6cc3b35d5a2 Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Thu, 19 Aug 2021 14:00:37 +0800 Subject: [PATCH] fix layout resize and show on dialogs --- Roo/bootstrap/Modal.js | 14 +++++++- Roo/bootstrap/layout/Manager.js | 4 ++- Roo/bootstrap/panel/Content.js | 2 +- Roo/bootstrap/panel/Grid.js | 16 +++------ roojs-bootstrap-debug.js | 36 +++++++++++-------- roojs-bootstrap.js | 64 ++++++++++++++++----------------- 6 files changed, 76 insertions(+), 60 deletions(-) diff --git a/Roo/bootstrap/Modal.js b/Roo/bootstrap/Modal.js index 39851b5dff..006fedef7f 100644 --- a/Roo/bootstrap/Modal.js +++ b/Roo/bootstrap/Modal.js @@ -166,6 +166,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { delete this.items; for(var i =0;i < items.length;i++) { + // we force children not to montor widnow resize - as we do that for them. + items[i].monitorWindowResize = false; nitems.push(this.addxtype(Roo.apply({}, items[i]))); } } @@ -373,6 +375,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { } this.resizeTo(w,h); + // any layout/border etc.. resize.. + (function () { + this.items.forEach( function(e) { + e.layout ? e.layout() : false; + + }); + }).defer(100,this); + }, show : function() { @@ -417,7 +427,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { // set zindex here - otherwise it appears to be ignored... this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++); - + + + // this is for children that are... layout.Border (function () { this.items.forEach( function(e) { e.layout ? e.layout() : false; diff --git a/Roo/bootstrap/layout/Manager.js b/Roo/bootstrap/layout/Manager.js index 1068460dd3..3ff07aa31b 100644 --- a/Roo/bootstrap/layout/Manager.js +++ b/Roo/bootstrap/layout/Manager.js @@ -17,6 +17,8 @@ */ Roo.bootstrap.layout.Manager = function(config) { + this.monitorWindowResize = true; // do this before we apply configuration. + Roo.bootstrap.layout.Manager.superclass.constructor.call(this,config); @@ -24,7 +26,7 @@ Roo.bootstrap.layout.Manager = function(config) /** false to disable window resize monitoring @type Boolean */ - this.monitorWindowResize = true; + this.regions = {}; this.addEvents({ /** diff --git a/Roo/bootstrap/panel/Content.js b/Roo/bootstrap/panel/Content.js index 61d0760c5b..a44ae2e269 100644 --- a/Roo/bootstrap/panel/Content.js +++ b/Roo/bootstrap/panel/Content.js @@ -287,7 +287,7 @@ Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, { ignoreResize : function(w, h) { - return false; // always resize? + //return false; // always resize? if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){ return true; }else{ diff --git a/Roo/bootstrap/panel/Grid.js b/Roo/bootstrap/panel/Grid.js index 2357882cd5..890ce7a164 100644 --- a/Roo/bootstrap/panel/Grid.js +++ b/Roo/bootstrap/panel/Grid.js @@ -98,9 +98,7 @@ Roo.bootstrap.panel.Grid = function(config) Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, { - // private - is_resizing : false, - + getId : function(){ return this.grid.id; }, @@ -115,12 +113,8 @@ Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, setSize : function(width, height) { - if (this.is_resizing) { - return; - - } - this.is_resizing = true; - if(!this.ignoreResize(width, height)){ + + //if(!this.ignoreResize(width, height)){ var grid = this.grid; var size = this.adjustForComponents(width, height); // tfoot is not a footer? @@ -148,8 +142,8 @@ Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, //} grid.autoSize(); - } - this.is_resizing = false; + //} + }, diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 15aecbb023..6bddf696b3 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -4418,6 +4418,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { delete this.items; for(var i =0;i < items.length;i++) { + // we force children not to montor widnow resize - as we do that for them. + items[i].monitorWindowResize = false; nitems.push(this.addxtype(Roo.apply({}, items[i]))); } } @@ -4625,6 +4627,14 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { } this.resizeTo(w,h); + // any layout/border etc.. resize.. + (function () { + this.items.forEach( function(e) { + e.layout ? e.layout() : false; + + }); + }).defer(100,this); + }, show : function() { @@ -4669,7 +4679,9 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { // set zindex here - otherwise it appears to be ignored... this.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++); - + + + // this is for children that are... layout.Border (function () { this.items.forEach( function(e) { e.layout ? e.layout() : false; @@ -37862,6 +37874,8 @@ Roo.bootstrap.SplitBar.BOTTOM = 4; */ Roo.bootstrap.layout.Manager = function(config) { + this.monitorWindowResize = true; // do this before we apply configuration. + Roo.bootstrap.layout.Manager.superclass.constructor.call(this,config); @@ -37869,7 +37883,7 @@ Roo.bootstrap.layout.Manager = function(config) /** false to disable window resize monitoring @type Boolean */ - this.monitorWindowResize = true; + this.regions = {}; this.addEvents({ /** @@ -40521,7 +40535,7 @@ Roo.extend(Roo.bootstrap.panel.Content, Roo.bootstrap.Component, { ignoreResize : function(w, h) { - return false; // always resize? + //return false; // always resize? if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){ return true; }else{ @@ -40928,9 +40942,7 @@ Roo.bootstrap.panel.Grid = function(config) Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, { - // private - is_resizing : false, - + getId : function(){ return this.grid.id; }, @@ -40945,12 +40957,8 @@ Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, setSize : function(width, height) { - if (this.is_resizing) { - return; - - } - this.is_resizing = true; - if(!this.ignoreResize(width, height)){ + + //if(!this.ignoreResize(width, height)){ var grid = this.grid; var size = this.adjustForComponents(width, height); // tfoot is not a footer? @@ -40978,8 +40986,8 @@ Roo.extend(Roo.bootstrap.panel.Grid, Roo.bootstrap.panel.Content, //} grid.autoSize(); - } - this.is_resizing = false; + //} + }, diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 32e8f08ec2..b12d47e675 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -195,27 +195,27 @@ if(!this.el){var B=Roo.apply({},this.getAutoCreate());B.id=Roo.id();if(this.cls) }this.dialogEl=this.el.select('.modal-dialog',true).first();this.bodyEl=this.el.select('.modal-body',true).first();this.closeEl=this.el.select('.modal-header .close',true).first();this.headerEl=this.el.select('.modal-header',true).first();this.titleEl=this.el.select('.modal-title',true).first(); this.footerEl=this.el.select('.modal-footer',true).first();this.maskEl=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-dlg-mask"},true);if(this.buttons.length){Roo.each(this.buttons,function(bb){var b=Roo.apply({},bb);b.xns=b.xns||Roo.bootstrap;b.xtype=b.xtype||'Button'; if(typeof(b.listeners)=='undefined'){b.listeners={click:this.onButtonClick.createDelegate(this)};}var E=Roo.factory(b);E.render(this.getButtonContainer());},this);}var C=[];if(typeof(this.items)!='undefined'){var D=this.items;delete this.items;for(var i=0; -i-1){this.toggleHeaderInput(false)}},this);this.headerEditEl.on('blur',function(e){this.toggleHeaderInput(false)},this);}},resize:function(){this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true)); if(this.fitwindow){this.dialogEl.setStyle({'max-width':'100%'});this.setSize(this.width||Roo.lib.Dom.getViewportWidth(true)-30,this.height||Roo.lib.Dom.getViewportHeight(true));return;}if(this.max_width!==0){var w=Math.min(this.max_width,Roo.lib.Dom.getViewportWidth(true)-30); if(this.height){this.setSize(w,this.height);return;}if(this.max_height){this.setSize(w,Math.min(this.max_height,Roo.lib.Dom.getViewportHeight(true)-60));return;}if(!this.fit_content){this.setSize(w,Roo.lib.Dom.getViewportHeight(true)-60);return;}this.setSize(w,Math.min(60+this.headerEl.getHeight()+this.footerEl.getHeight()+this.getChildHeight(this.bodyEl.dom.childNodes),Roo.lib.Dom.getViewportHeight(true)-60)); -}},setSize:function(w,h){if(!w&&!h){return;}this.resizeTo(w,h);},show:function(){if(!this.rendered){this.render();}this.toggleHeaderInput(false);this.el.removeClass('hideing');this.el.dom.style.display='block';Roo.get(document.body).addClass('modal-open'); -if(this.animate){(function(){this.el.addClass('show');this.el.addClass('in');}).defer(50,this);}else{this.el.addClass('show');this.el.addClass('in');}Roo.get(document.body).addClass("x-body-masked");this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true),Roo.lib.Dom.getViewHeight(true)); -this.maskEl.setStyle('z-index',Roo.bootstrap.Modal.zIndex++);this.maskEl.dom.style.display='block';this.maskEl.addClass('show');this.resize();this.fireEvent('show',this);this.el.setStyle('z-index',Roo.bootstrap.Modal.zIndex++);(function(){this.items.forEach(function(e){e.layout?e.layout():false; -});}).defer(100,this);},hide:function(){if(this.fireEvent("beforehide",this)!==false){this.maskEl.removeClass('show');this.maskEl.dom.style.display='';Roo.get(document.body).removeClass("x-body-masked");this.el.removeClass('in');this.el.select('.modal-dialog',true).first().setStyle('transform',''); -if(this.animate){this.el.addClass('hideing');this.el.removeClass('show');(function(){if(!this.el.hasClass('hideing')){return;}this.el.dom.style.display='';Roo.get(document.body).removeClass('modal-open');this.el.removeClass('hideing');}).defer(150,this);} -else{this.el.removeClass('show');this.el.dom.style.display='';Roo.get(document.body).removeClass('modal-open');}this.fireEvent('hide',this);}},isVisible:function(){return this.el.hasClass('show')&&!this.el.hasClass('hideing');},addButton:function(A,cb){var b=Roo.apply({} -,{html:A});b.xns=b.xns||Roo.bootstrap;b.xtype=b.xtype||'Button';if(typeof(b.listeners)=='undefined'){b.listeners={click:cb.createDelegate(this)};}var B=Roo.factory(b);B.render(this.getButtonContainer());return B;},setDefaultButton:function(A){},resizeTo:function(w,h){this.dialogEl.setWidth(w); -var A=this.headerEl.getHeight()+this.footerEl.getHeight()+60;this.bodyEl.setHeight(h-A);this.fireEvent('resize',this);},setContentSize:function(w,h){},onButtonClick:function(A,e){this.fireEvent('btnclick',A.name,e);},setTitle:function(A){this.titleEl.dom.innerHTML=A; -this.title=A;},setBody:function(A){this.bodyEl.dom.innerHTML=A;},applyBody:function(A){if(!this.tmpl){Roo.log("Error - using apply Body without a template");}this.tmpl.overwrite(this.bodyEl,A);},getChildHeight:function(A){if(!A||A.length==0){return 0;}var B=0; -for(var i=0;i=0){var s=k.split('-');for(var i=0;i"+this.title[k]+"";}}else{t+=""+this.title[k]+"";}}return t;},setTitle:function(A){this.title=A;if(this.region){this.region.updatePanelTitle(this,A);}},isClosable:function(){return this.closable; -},beforeSlide:function(){this.el.clip();this.resizeEl.clip();},afterSlide:function(){this.el.unclip();this.resizeEl.unclip();},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();}},destroy:function(){this.el.removeAllListeners(); -var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,getChildContainer:function(){return this.getEl();},onScroll:function(e){this.fireEvent('scroll',this,e);}}); +return true;},setContent:function(A,B){if(this.iframe){return;}this.el.update(A,B);},ignoreResize:function(w,h){if(this.lastSize&&this.lastSize.width==w&&this.lastSize.height==h){return true;}else{this.lastSize={width:w,height:h};return false;}},getUpdateManager:function(){if(this.iframe){return false; +}return this.el.getUpdateManager();},load:function(){if(this.iframe){return this;}var um=this.el.getUpdateManager();um.update.apply(um,arguments);return this;},setUrl:function(A,B,C){if(this.iframe){this.iframeEl.dom.src=A;return false;}if(this.refreshDelegate){this.removeListener("activate",this.refreshDelegate); +}this.refreshDelegate=this._handleRefresh.createDelegate(this,[A,B,C]);this.on("activate",this.refreshDelegate);return this.el.getUpdateManager();},_handleRefresh:function(A,B,C){if(!C||!this.loaded){var D=this.el.getUpdateManager();D.update(A,B,this._setLoaded.createDelegate(this)); +}},_setLoaded:function(){this.loaded=true;},getId:function(){return this.el.id;},getEl:function(){return this.wrapEl||this.el;},adjustForComponents:function(A,B){if(this.resizeEl!=this.el){A-=this.el.getFrameWidth('lr');B-=this.el.getFrameWidth('tb');}if(this.toolbar){var te=this.toolbar.getEl(); +te.setWidth(A);B-=te.getHeight();}if(this.footer){var te=this.footer.getEl();te.setWidth(A);B-=te.getHeight();}if(this.adjustments){A+=this.adjustments[0];B+=this.adjustments[1];}return {"width":A,"height":B};},setSize:function(A,B){if(this.fitToFrame&&!this.ignoreResize(A,B)){if(this.fitContainer&&this.resizeEl!=this.el){this.el.setSize(A,B); +}var C=this.adjustForComponents(A,B);if(this.iframe){this.iframeEl.setSize(A,B);}this.resizeEl.setSize(this.autoWidth?"auto":C.width,this.autoHeight?"auto":C.height);this.fireEvent('resize',this,C.width,C.height);}},getTitle:function(){if(typeof(this.title)!='object'){return this.title; +}var t='';for(var k in this.title){if(!this.title.hasOwnProperty(k)){continue;}if(k.indexOf('-')>=0){var s=k.split('-');for(var i=0;i"+this.title[k]+"";}}else{t+=""+this.title[k]+""; +}}return t;},setTitle:function(A){this.title=A;if(this.region){this.region.updatePanelTitle(this,A);}},isClosable:function(){return this.closable;},beforeSlide:function(){this.el.clip();this.resizeEl.clip();},afterSlide:function(){this.el.unclip();this.resizeEl.unclip(); +},refresh:function(){if(this.refreshDelegate){this.loaded=false;this.refreshDelegate();}},destroy:function(){this.el.removeAllListeners();var A=document.createElement("span");A.appendChild(this.el.dom);A.innerHTML="";this.el.remove();this.el=null;},form:false,view:false,getChildContainer:function(){return this.getEl(); +},onScroll:function(e){this.fireEvent('scroll',this,e);}}); // Roo/bootstrap/panel/Grid.js Roo.bootstrap.panel.Grid=function(A){this.wrapper=Roo.DomHelper.append(document.body,{tag:"div",cls:"roo-layout-grid-wrapper roo-layout-inactive-content"},true);A.el=this.wrapper;if(A.container){this.wrapper.setStyle("overflow","hidden");this.wrapper.addClass('roo-grid-container'); }if(A.toolbar){var B=this.wrapper.createChild();this.toolbar=Roo.factory(A.toolbar);var ti=[];if(A.toolbar.items){ti=A.toolbar.items;delete A.toolbar.items;}var C=[];this.toolbar.render(B);for(var i=0;i