PDA

View Full Version : Auto show/hide scrollbar



extop
27 Jan 2014, 10:08 AM
I have a container that shows some text. I want the container to show scroll bar only when the user hovers his mouse on the container. Is there a way to do that? Thanks!

scottmartin
28 Jan 2014, 1:33 PM
See if the following will help:



Ext.application({
name: 'Fiddle',

launch: function() {

var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
height: 200,

autoScroll: false,

html: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',

renderTo: Ext.getBody(),

listeners: {
el: {
mouseover: {
fn: function(event, html, eOpts) {
panel.setAutoScroll(true);
}
},
mouseout: {
fn: function(event, html, eOpts) {
panel.setAutoScroll(false);
}
}
}
}
});

}
});

extop
28 Jan 2014, 2:26 PM
Thank you for your response!! Your code does show/hide scrollbar upon mouse hover event but when the scrollbar is set to hidden in the mouseout event, the content of the panel overflows. Is there a way to stop it? Thanks!!

scottmartin
28 Jan 2014, 3:05 PM
What version of Ext4 are you using and can you send a screen of what you are seeing?

extop
28 Jan 2014, 4:01 PM
The version is 4.2.1.882. I have attached the screenshot of the output with this message. Than you!

scottmartin
28 Jan 2014, 4:34 PM
Have you tested this outside of jsFiddle?

extop
28 Jan 2014, 4:56 PM
Yes, it dos the same thing in Chrome.

scottmartin
29 Jan 2014, 5:32 AM
Please excusing my confusion .. as you screen shot seems to a bit different than expected .. like there is no CSS for the panel, and I do not see the overflow.

Please see the following example:
https://fiddle.sencha.com/#fiddle/32j

.. or perhaps I am not seeing what you are trying to describe.

extop
29 Jan 2014, 7:57 AM
Thank you for your response Scott!! I am using container, not a panel.I apologize for the confusion. Your code displays the scroll bar on panel, but the code overflow occurs when container is used.