PDA

View Full Version : [CLOSED][2.x/3.x] BorderLayout floating region not resized



SimonDeNooij
30 Jun 2008, 12:31 AM
Sizing of 'preview' panels (panels that aren't permanently expanded but 'previewed' by clicking in the header area) is not right.

It can be shown with the complex layout example on your web site:

Expand West panel (with expand button)
Collapse West panel
Collapse South panel
'Preview' West panel:

the height of the west panel is not right. It is the height it had before it was collapsed.

The same bug exists for horizontal border panels (north and south). I don't know the version you are using for your comples layout example but the bug still exists in version 2.1

Also: it would be nice to have events for previewing like for true expand/collapse

Keep up the good work,

Simon

jsakalos
30 Jun 2008, 12:36 PM
Looks like bug. Do you want me to move this thread to Bugs forum?

SimonDeNooij
1 Jul 2008, 7:40 AM
Anything to get it solved :)

jsakalos
1 Jul 2008, 11:10 AM
Moved.

SimonDeNooij
5 Sep 2008, 2:46 AM
Are you planning to solve this bug in the near future? It prevents me from using this otherwise very sex feature (:|

Condor
5 Sep 2008, 3:33 AM
'preview' is called 'floating' in Ext.

I noticed this a long time ago (http://extjs.com/forum/showthread.php?p=112610#post112610), but I never made a proper bug report for it.

SimonDeNooij
17 Oct 2008, 2:29 AM
Ok, but the question remains? will it be solved in the near future?

Condor
17 Oct 2008, 2:45 AM
Here is a possible solution:

Ext.override(Ext.layout.BorderLayout.Region, {
slideOut : function(){
if(this.isSlid || this.el.hasActiveFx()){
return;
}
this.isSlid = true;
this.panel.isSlid = true;
var ts = this.panel.tools;
if(ts && ts.toggle){
ts.toggle.hide();
}
this.el.show();
if(this.position == 'east' || this.position == 'west'){
this.panel.setSize(undefined, this.collapsedEl.getHeight());
}else{
this.panel.setSize(this.collapsedEl.getWidth(), undefined);
}
this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
this.el.setStyle("z-index", 102);
this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
if(this.animFloat !== false){
this.beforeSlide();
this.el.slideIn(this.getSlideAnchor(), {
callback: function(){
this.afterSlide();
this.initAutoHide();
Ext.getDoc().on("click", this.slideInIf, this);
},
scope: this,
block: true
});
}else{
this.initAutoHide();
Ext.getDoc().on("click", this.slideInIf, this);
}
},
afterSlideIn : function(){
this.clearAutoHide();
this.isSlid = false;
delete this.panel.isSlid;
this.clearMonitor();
this.el.setStyle("z-index", "");
this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
this.el.dom.style.left = this.restoreLT[0];
this.el.dom.style.top = this.restoreLT[1];
var ts = this.panel.tools;
if(ts && ts.toggle){
ts.toggle.show();
}
},
slideIn : function(cb){
if(!this.isSlid || this.el.hasActiveFx()){
Ext.callback(cb);
return;
}
this.isSlid = false;
delete this.panel.isSlid;
if(this.animFloat !== false){
this.beforeSlide();
this.el.slideOut(this.getSlideAnchor(), {
callback: function(){
this.el.hide();
this.afterSlide();
this.afterSlideIn();
Ext.callback(cb);
},
scope: this,
block: true
});
}else{
this.el.hide();
this.afterSlideIn();
}
}
});
Ext.override(Ext.Panel, {
onResize : function(w, h){
if(w !== undefined || h !== undefined){
if(!this.collapsed || this.isSlid){
if(typeof w == 'number'){
this.body.setWidth(
this.adjustBodyWidth(w - this.getFrameWidth()));
}else if(w == 'auto'){
this.body.setWidth(w);
}
if(typeof h == 'number'){
this.body.setHeight(
this.adjustBodyHeight(h - this.getFrameHeight()));
}else if(h == 'auto'){
this.body.setHeight(h);
}
if(this.disabled && this.el._mask){
this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight());
}
}else{
this.queuedBodySize = {width: w, height: h};
if(!this.queuedExpand && this.allowQueuedExpand !== false){
this.queuedExpand = true;
this.on('expand', function(){
delete this.queuedExpand;
this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
this.doLayout();
}, this, {single:true});
}
}
this.fireEvent('bodyresize', this, w, h);
}
this.syncShadow();
}
});
Ext.override(Ext.layout.ContainerLayout, {
onResize: function(){
if(this.container.collapsed && !this.container.isSlid){
return;
}
var b = this.container.bufferResize;
if(b){
if(!this.resizeTask){
this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
this.resizeBuffer = typeof b == 'number' ? b : 100;
}
this.resizeTask.delay(this.resizeBuffer);
}else{
this.layout();
}
}
});
Ext.override(Ext.layout.FitLayout, {
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed || this.container.isSlid){
this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
}
}
});

SimonDeNooij
24 Oct 2008, 12:19 AM
Thanks for sorting it out! I hope this makes it into the next Ext release, I allready changed the design of our app to avoid this problem and am now too time-pressed to incorporate this solution, but the sliding panels will definitely make it into future versions of our app!

Regards,

Simon

mprice
24 Oct 2008, 4:33 AM
Condor, thanks for the update. I applied these overrides to the complex layout example, and now the region itself does indeed resize correctly when "floated" after a browser resize. But the contents of the region to not resize properly. The east region is a fit layout, and the tab panel is added directly to the east region. How would I get the tab panel to resize as well? See screenshot :

10156

Repro steps:
1. Collapse the east region
2. Resize the browser to make it bigger
3. "Float" the east region

Condor
24 Oct 2008, 5:10 AM
Yes, you would also need:

Ext.override(Ext.layout.ContainerLayout, {
onResize: function(){
if(this.container.collapsed && !this.container.isSlid){
return;
}
var b = this.container.bufferResize;
if(b){
if(!this.resizeTask){
this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
this.resizeBuffer = typeof b == 'number' ? b : 100;
}
this.resizeTask.delay(this.resizeBuffer);
}else{
this.layout();
}
}
});
Ext.override(Ext.layout.FitLayout, {
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed || this.container.isSlid){
this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getStyleSize());
}
}
});

(original post also updated with this code)

mprice
24 Oct 2008, 5:21 AM
Perfect! So next logical question is - when will this fix be incorporated into the product?

uptodate
11 Nov 2009, 2:19 AM
is this bug solved in Extjs 3.0 ?

Condor
11 Nov 2009, 3:23 AM
No, it still isn't fixed.

I'll move this thread to the Ext 3.0 Bugs section.

uptodate
18 Dec 2009, 12:59 AM
Condor have you a fix for ExtJs 3.1 ?

Condor
18 Dec 2009, 2:00 AM
Here's the Ext 3.1.0 override:

Ext.override(Ext.layout.BorderLayout.Region, {
slideOut : function(){
if(this.isSlid || this.el.hasActiveFx()){
return;
}
this.isSlid = true;
this.panel.isSlid = true;
var ts = this.panel.tools;
if(ts && ts.toggle){
ts.toggle.hide();
}
this.el.show();
if(this.position == 'east' || this.position == 'west'){
this.panel.setSize(undefined, this.collapsedEl.getHeight());
}else{
this.panel.setSize(this.collapsedEl.getWidth(), undefined);
}
this.restoreLT = [this.el.dom.style.left, this.el.dom.style.top];
this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
this.el.setStyle("z-index", this.floatingZIndex+2);
this.panel.el.replaceClass('x-panel-collapsed', 'x-panel-floating');
if(this.animFloat !== false){
this.beforeSlide();
this.el.slideIn(this.getSlideAnchor(), {
callback: function(){
this.afterSlide();
this.initAutoHide();
Ext.getDoc().on("click", this.slideInIf, this);
},
scope: this,
block: true
});
}else{
this.initAutoHide();
Ext.getDoc().on("click", this.slideInIf, this);
}
},
afterSlideIn : function(){
this.clearAutoHide();
this.isSlid = false;
delete this.panel.isSlid;
this.clearMonitor();
this.el.setStyle("z-index", "");
this.panel.el.replaceClass('x-panel-floating', 'x-panel-collapsed');
this.el.dom.style.left = this.restoreLT[0];
this.el.dom.style.top = this.restoreLT[1];
var ts = this.panel.tools;
if(ts && ts.toggle){
ts.toggle.show();
}
},
slideIn : function(cb){
if(!this.isSlid || this.el.hasActiveFx()){
Ext.callback(cb);
return;
}
this.isSlid = false;
delete this.panel.isSlid;
if(this.animFloat !== false){
this.beforeSlide();
this.el.slideOut(this.getSlideAnchor(), {
callback: function(){
this.el.hide();
this.afterSlide();
this.afterSlideIn();
Ext.callback(cb);
},
scope: this,
block: true
});
}else{
this.el.hide();
this.afterSlideIn();
}
}
});
Ext.override(Ext.Container, {
doLayout: function(shallow, force){
var rendered = this.rendered,
forceLayout = force || this.forceLayout,
cs, i, len, c;
this.layoutDone = true;
if(!this.canLayout() || (this.collapsed && !this.isSlid)){
this.deferLayout = this.deferLayout || !shallow;
if(!forceLayout){
return;
}
shallow = shallow && !this.deferLayout;
} else {
delete this.deferLayout;
}
cs = (shallow !== true && this.items) ? this.items.items : [];
for(i = 0, len = cs.length; i < len; i++){
if ((c = cs[i]).layout) {
c.suspendLayoutResize = true;
}
}
if(rendered && this.layout){
this.layout.layout();
}
for(i = 0; i < len; i++){
if((c = cs[i]).doLayout){
c.doLayout(false, forceLayout);
}
}
if(rendered){
this.onLayout(shallow, forceLayout);
}
this.hasLayout = true;
delete this.forceLayout;
for(i = 0; i < len; i++){
if ((c = cs[i]).layout) {
delete c.suspendLayoutResize;
}
}
}
});
Ext.override(Ext.layout.ContainerLayout, {
onResize: function(){
var ct = this.container,
b = ct.bufferResize;
if (ct.collapsed && !ct.isSlid){
return;
}
if (b && ct.ownerCt) {
if (!ct.hasLayoutPending()){
if(!this.resizeTask){
this.resizeTask = new Ext.util.DelayedTask(this.runLayout, this);
this.resizeBuffer = Ext.isNumber(b) ? b : 50;
}
ct.layoutPending = true;
this.resizeTask.delay(this.resizeBuffer);
}
}else{
ct.doLayout(false, this.forceLayout);
}
}
});
Ext.override(Ext.layout.FitLayout, {
onLayout : function(ct, target){
Ext.layout.FitLayout.superclass.onLayout.call(this, ct, target);
if(!this.container.collapsed || this.container.isSlid){
this.setItemSize(this.activeItem || ct.items.itemAt(0), target.getViewSize(true));
}
}
});
Ext.override(Ext.Panel, {
onResize : function(w, h){
if(Ext.isDefined(w) || Ext.isDefined(h)){
if(!this.collapsed || this.isSlid){
if(Ext.isNumber(w)){
this.body.setWidth(w = this.adjustBodyWidth(w - this.getFrameWidth()));
} else if (w == 'auto') {
w = this.body.setWidth('auto').dom.offsetWidth;
} else {
w = this.body.dom.offsetWidth;
}
if(this.tbar){
this.tbar.setWidth(w);
if(this.topToolbar){
this.topToolbar.setSize(w);
}
}
if(this.bbar){
this.bbar.setWidth(w);
if(this.bottomToolbar){
this.bottomToolbar.setSize(w);
if (Ext.isIE) {
this.bbar.setStyle('position', 'static');
this.bbar.setStyle('position', '');
}
}
}
if(this.footer){
this.footer.setWidth(w);
if(this.fbar){
this.fbar.setSize(Ext.isIE ? (w - this.footer.getFrameWidth('lr')) : 'auto');
}
}
if(Ext.isNumber(h)){
h = Math.max(0, this.adjustBodyHeight(h - this.getFrameHeight()));
this.body.setHeight(h);
}else if(h == 'auto'){
this.body.setHeight(h);
}
if(this.disabled && this.el._mask){
this.el._mask.setSize(this.el.dom.clientWidth, this.el.getHeight());
}
}else{
this.queuedBodySize = {width: w, height: h};
if(!this.queuedExpand && this.allowQueuedExpand !== false){
this.queuedExpand = true;
this.on('expand', function(){
delete this.queuedExpand;
this.onResize(this.queuedBodySize.width, this.queuedBodySize.height);
}, this, {single:true});
}
}
this.onBodyResize(w, h);
}
this.syncShadow();
Ext.Panel.superclass.onResize.call(this);
}
});

uptodate
18 Dec 2009, 5:35 AM
thx condor this helps

uptodate
5 Mar 2010, 5:06 AM
when will this be fixed in svn ?

Jamie Avins
5 Mar 2010, 10:11 AM
The sizing issues is already resolved in SVN. Doing a recursive layout for a slideout is under consideration.