Question

Hello Guys我尝试使用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'放在窗口上，则会对该窗口的item-arrray中的所有项目应用。在您的情况下，网格将得到一个合适的布局（在您的窗口上配置），并将自动适应＆＃39;到窗口的大小。它永远不会滚动。

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的水平滚动条

3 个答案: