ExtJS4中的细长滚动条

我正在用ExtJS4MVC开发一个应用程序。我的滚动条有问题。我的extjs组件都不会呈现细长的滚动条。所有组件仅渲染丑陋的浏览器滚动条

Ext.define('Complaints.view.ComplaintGrid',{
    extend: 'Ext.grid.Panel',
    alias: 'widget.complaintgrid',
    id: 'complaintGrid',
    cls: 'custom-complaint-grid',   
    store: 'Complaints',

    columns :
    [
        {header: 'Date', dataIndex: 'Date', width: 200},
        {header: 'Data 1', dataIndex: 'data1', width: 200},
        {header: 'Data 2', dataIndex: 'data2', flex: 1},
        {header: 'Complaint', dataIndex: 'Complaint', width: 150},              
    ]   
})

这是我的应用程序中的一个网格面板的代码。这有两个问题

垂直滚动条不是细长滚动条

此时会出现不必要的水平滚动条

我把这个格子装在一个容器里了。代码如下

Ext.define('Complaints.view.CenterPanel',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.centerpanel',
    cls: 'custom-complaint-grid',
    id: 'centerPan',
    bodyStyle: "padding-left: 20px; padding-top: 10px; padding-right: 15px; background-color:#fff",
    layout: 'card',
    requires: [        
        'Complaints.view.ComplaintGrid', 
        'Complaints.view.ComplaintChart'
    ],
    initComponent: function(){       
        this.tbar = [{height: 50},'->',
            {
                    xtype: 'component',
                    cls: 'topDockTwoBtn',
                    width: 107,
                    height: 40
            },      
            {
                    xtype: 'component',
                    cls: 'topDockSixtyBtn',
                    width: 103,
                    height: 40,                    
            },
            {
                    xtype: 'component',
                    cls: 'topDockOneBtn',
                    width: 105,
                    height: 40
            },
            {
                    xtype: 'component', 
                    cls: 'topDockSrchBtn',
                    width: 72,
                    height: 40
            }
        ];

        this.items = [
            {
                xtype: 'complaintgrid'
            },
            {
                xtype: 'complaintchart'
            }
        ];

        this.bbar = [{height: 50},'->',
            {
                xtype: 'image',
                cls: 'btmDockChrtBtn',
                id: 'chartbutton',
                width: 53,
                height: 40,
                listeners: {
                    el: {
                        click: function() {
                            console.log('click reg');
                            Ext.getCmp('centerPan').getLayout().setActiveItem(1);
Ext.getCmp('centerPan').doLayout();
                            Ext.getCmp('chartbutton').addClass('btmDockChrtBtn-active');
                            Ext.getCmp('gridbutton').removeCls('btmDockGrdBtn-active');
                        }
                    }
                }
            },
            {
                xtype: 'component', 
                cls: 'btmDockGrdBtn',
                width: 58,
                height: 40,
                id: 'gridbutton',
                listeners: {
                    el: {
                        click: function() {
                            console.log('click reg');
                            Ext.getCmp('centerPan').getLayout().setActiveItem(0);
Ext.getCmp('centerPan').doLayout();
                            Ext.getCmp('gridbutton').addClass('btmDockGrdBtn-active');
                            Ext.getCmp('chartbutton').removeCls('btmDockChrtBtn-active');                       
                        }
                    }
                }
            }                
        ];                              
        this.callParent();
    }   
})

---

此外，我还使用了CSS，覆盖了网格面板的一些类，使其看起来像我想要的那个样。你知道为什么我得到的是水平滚动条而不是垂直滚动条吗。

你必须使用jScrollPane或fleXcroll:Cross Browser自定义滚动条。

我注意到不久前使用Chrome Canary时，所有的细长滚动条都被普通滚动条所取代（标准Chrome版本中显示的细长滚动条）。我的结论是，这是一个浏览器事件。我认为这是一个与浏览器相关的选择。我的滚动条似乎与我使用的浏览器匹配