ExtJs：添加水平滚动条 css

Question

大家好，我正在尝试使用 overflowX: 'scroll', 向我的网格面板添加水平滚动条我可以看到滚动条，但它仍然不起作用：

    Ext.define('Shopware.apps.UnSqlReader.view.window.Window', {
    extend: 'Enlight.app.Window',
    alias: 'widget.main-window-view',
    height: '80%',
    width: 1200,
    layout: 'fit',
    title: '{s name=window_title}SQL Reader{/s}',
    initComponent: function () {
    var me = this;
    me.items = me.getItems();
    me.dockedItems = me.createDockedItems();
    me.callParent(arguments);
    },
    createDockedItems: function () {
    var me = this;
    return [
        {
        width: 185,
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {
            xtype: 'combobox',
            id: 'sqlField',
            editable: false,
            emptyText: 'Select SQL file',
            displayField: 'name',
            valueField: 'name',
            store: Ext.create('Shopware.apps.UnSqlReader.store.UnSqlReaderFileList'),
            listeners: {
                change: function (field, newValue) {
                me.fireEvent('onSqlChange', me, newValue);
                }
            }
            }
        ]
        }
    ];
    },
    getItems: function () {
    var me = this;
    me.grid = Ext.create('Ext.grid.Panel', {
        alias: 'widget.view-grid-grid',
        hidden: true,
        layout: 'fit',
        height: '80%',
        width: 500,
        overflowX: 'scroll',
        autoScroll: true,
        columns: [
        ],
        dockedItems: [
        me.getPagingbar()
        ]
    });
    return [me.grid];
    },
    getPagingbar: function () {
    var me = this;
    me.pagingBar = Ext.create('Ext.toolbar.Paging', {
        dock: 'bottom',
        displayInfo: true
    });

    return me.pagingBar;
    }
});

有人有想法吗？ :) 谢谢你！

Answer 1

别说了overflowX: 'scroll',autoScroll: true,水平滚动就够了

Answer 2

删除 layout: 'fit' 配置。布局配置用于配置它的组件的所有子项目。如果将 layout: 'fit' 放在 window 上，这将应用于该 window 的项目数组中的所有项目。在您的情况下，网格将获得合适的布局（如您的 window 上配置的那样），并且会自动 'fit' 到 window 的大小。它永远不会滚动。

Answer 3

试试下面的代码：

    getItems: function () {
        var me = this;
        me.grid = Ext.create('Ext.grid.Panel', {
            alias: 'widget.view-grid-grid',
            columns: [
            ],
            viewConfig:{
               forceFit:false
            },
            dockedItems: [
            me.getPagingbar()
            ]
        });
        return me.grid;
   },

ExtJs：添加水平滚动条 css

ExtJs: Add horizontal scroll bar with out css

extjs

grid

scrollbar

panel

extjs4.2