Q:

ExtJs: Add horizontal scroll bar with out css

Hello Guys im trying to add a horizontal scroll to my grid panel with overflowX: 'scroll',
i can see the scroll bar but it still don't function:
    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;
    }
});

anybody an idea? :) Thank U!

A:

Remove the layout: 'fit' config. The layout config is used for all childs items of the component where you configure it on. If you put layout: 'fit' on the window, this will be applied on all items in the item-arrray of that window. In your case the grid will get a fit layout (as configured on your window) and will automatically 'fit' to the size of the window. It will never get scrollable.

