Menu
Team,
Is anyone aware how to disable horizontal scroll bar in panel. I am using EXTJS 3.4
Basically I want only vertical scroll bar to be visible and not horizontal.
I tried autoScroll=true as panel property but If I do so I can see both horizontal and vertical scroll bar.
here is the code.
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var tab2 = new Ext.FormPanel({
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
title: 'Run Report',
bodyStyle:'padding:5px',
border : true,
style: 'margin:0 auto;margin-top:50px;margin-left:50',
width: 900,
height:600,
items:
[{
xtype:'panel',
border:true,
height:75,
title:'Inner Panel',
bodyStyle:'padding:5px',
autoScroll:true,
items: [{
layout:'column',
border :false,
items:[{
columnWidth:.3,
layout: 'form',
border :false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.3,
layout: 'form',
border :false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
}]
}]
,
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
tab2.render(document.body);
});
</script>
</div>
</body>
</html>
468
The solution is to set overflowY to 'auto' and then remove autoScroll completely.
xtype:'panel',
border:true,
height:75,
title:'Inner Panel',
bodyStyle:'padding:5px',
//autoScroll:true,
overflowY: 'auto'
Using 4.2.1 what works for me in Chrome, FF and IE11 is using this:
style: 'overflow-y: scroll; overflow-x: hidden;'
I know this is late but this is the actual setting to use:
bodyStyle:'overflowY: auto',
Hope it helps someone. Should be able to get it to work in 4.x implementations too. So far I only tested it in 3.4.
45
// autoScroll:true,
// style:'overflow-y:auto;overflow-x:hidden;',
overflowY: 'auto',
It works with replacing comments with overflowY.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
