ExtJs：添加没有 css 的水平滚动条答案

【问题标题】：ExtJs: Add horizontal scroll bar with out cssExtJs：添加没有 css 的水平滚动条
【发布时间】：2015-09-15 10:04:03
【问题描述】：

大家好，我正在尝试使用 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;
    }
});

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

【问题讨论】：

您是否尝试将 scrollable: 'horizontal' (或 true) 添加到网格？
是的 :) 现在尝试了它仍然没有功能：/
如果我是你，我会从网格中删除布局：'fit'（因为父面板布局已经适合）和宽度。然后，添加可滚动。但我不确定。
顺便说一句仍然没有成功。我找不到可滚动的属性，我认为这不存在：D
所以，我不确定您还能尝试什么。是的，确实如此docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/…

标签： extjs grid scrollbar panel extjs4.2

【解决方案1】：

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

【讨论】：

嗯，我可以看到栏，但我不知道为什么我不能使用它:(，我可能要更改布局吗？
删除overflowX: 'scroll'后你检查了吗？你使用的是哪个版本？

【解决方案2】：

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

【讨论】：

【解决方案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;
   },

【讨论】：