PDA

View Full Version : Scrollbars in Ext 4.1.x and Mc OS X...



Jangla
12 May 2014, 7:01 AM
...and scrollbars on "Always" in the system settings. This invariably leads to double scrollbars - see attached images.

The window is a border layout (2 thirds, one third split) with a data view and a grid in the center region and a form and toolbar in the east.

The main core of the window code is as follows:



...
onRender: function(){
var me = this;


me.callParent( arguments );


me.width = Ext.Element.getViewportWidth();
me.height = Ext.Element.getViewportHeight();
},


afterFirstLayout: function(){
var me = this;


me.callParent( arguments );
setTimeout( function(){
Ext.EventManager.onWindowResize( me.fireResize, me );
}, 1 );
},


fireResize: function( width, height ){
if (width != this.width || height != this.height){
this.setSize( width, height );
}
},


setAlignment: function(){
var xy = this.el.getAlignToXY( this.container, 'c-c' ),
thisXPos = xy[0];


this.setPosition( thisXPos, Math.max( 0, window.pageYOffset ) );


},


afterShow : function(){
this.setAlignment();
this.addOverflow();
this.callParent();
},


removeOverflow: function(){
// only remove the overflow is this is the last remaining *visible* full screen window (you could have one open on top of the other)
if (Ext.ComponentQuery.query( 'mywin[hidden=false]' ).length <= 1){
Ext.getBody().removeCls( this.overflowCls )
}
},
addOverflow : function(){
Ext.getBody().addCls( this.overflowCls )
}
...


Anyone have any experience with Mac OS X scrollbars and has worked out a way to ensure you don't get double ups?

jsakalos
12 May 2014, 8:25 AM
This often happens if you apply some additional padding or margins on inner components; is that the case? If not, make a showcase on https://fiddle.sencha.com I'll run it on my Mac with scrollbars "Always" visible.

Jangla
14 May 2014, 1:27 AM
There is padding and margin in the sidebar panel in order to make sure the text boxes and controls layout nicely. Are you saying I shouldn't use config like this:



...
padding: '10',
margin : '0',
border : '0 0 1 0',
...


I'm also going to have a play about suspending layouts until the last second as I've been seeing other layout issues in a similar panel where a gap is visible between a container and a grid until you call a full layout again.

If that doesn't work I'll have to resort to trying to get a full test coded up - bear in mind it can take some time to extricate this from the system it's built in order to successfully test.

Thanks for your input so far :)

jsakalos
14 May 2014, 3:40 AM
Well, I try to avoid any styling directly on components, at least, at the beginning to see that everything lays out nicely. Then I may sometimes add them but I prefer to separate logic from appearance and remove the styling to css classes. Easiest to test: comment all margins and paddings, make sure that layout is set at each level of containment chain and try again. As you say, the last resort is a showcase.

Jangla
14 May 2014, 5:40 AM
I have a solution....and it goes completely contrary to everything I've learned about Ext so I'd like to discuss it before I mark this as the best answer.

Ready for it? Not enough nesting!

This was the old code (stripped back to just the pertinent details):




Ext.define( 'Ext.MyWindow', {
...
layout : 'border',
...
initComponent: function(){


Ext.apply( me, {
items : [
{
xtype : 'mygrid',
region : 'center',
cls : 'my-center-region'
},
{
xtype : 'panel',
region : 'west',
cls : 'my-west-region',
autoScroll : true,
width : 330,
items : [{...}],
dockedItems: [{...}]
}
]
} );


me.callParent( arguments );
}
...
});





Here's the new version:




Ext.define( 'Ext.MyWindow', {
...
layout : 'fit',
...
initComponent: function(){


Ext.apply( me, {
items : [
{
xtype : 'container',
layout : 'border',
items : [
{
xtype : 'mygrid',
region : 'center',
cls : 'my-center-region'
},
{
xtype : 'panel',
region : 'west',
cls : 'my-west-region',
autoScroll : true,
width : 330,
items : [{...}],
dockedItems: [{...}]
}
]
}
]
} );


me.callParent( arguments );
}
...
});










The changes are:

Window goes from border to fit layout.
Add a new container in the window as border layout.

Worth bearing in mind: this window is full screen so has a few methods to make sure it scales to the window on open and on resize of the browser. Some of those methods break with this change so I've still got to work out how to address those.

jsakalos
14 May 2014, 6:01 AM
Strange, usually the reverse is the problem: "too much nesting". Anyway, if it works, all is fine.