Question

队

是否有人知道如何在面板中禁用水平滚动条。我正在使用EXTJS 3.4

基本上我只希望垂直滚动条可见而不是水平。

我尝试使用autoScroll = true作为面板属性，但如果我这样做，我可以看到水平和垂直滚动条。

这是代码。

<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>

Answer 1

解决方法是将overflowY设置为'auto'，然后完全删除autoScroll。

xtype:'panel',
border:true,
height:75,
title:'Inner Panel',
bodyStyle:'padding:5px',
//autoScroll:true,
overflowY: 'auto'

Answer 2

在Chrome中使用4.2.1对我有用，FF和IE11正在使用：

style: 'overflow-y: scroll; overflow-x: hidden;'

Answer 3

// autoScroll:true,
// style:'overflow-y:auto;overflow-x:hidden;',
overflowY: 'auto',

它可以用overflowY替换注释。

Answer 4

我知道这已经晚了，但这是实际使用的设置：

bodyStyle:'overflowY: auto',

希望它有所帮助。应该能够让它在4.x实现中工作。到目前为止，我只在3.4中测试过它。

在EXTJS面板中禁用水平滚动条

4 个答案: