Collapse Filter Panel in dockedItems

Question

Hello i`m struggeling with docked items im trying to collapse my filter panel but this doenst work also the colappse arrow is on the wrong side has anybody an idea how i can fix it. Im Creating an getFilterPane and return it in initComponenet as an toolbar item.

Ext.define('Shopware.apps.SDG.view.update.Grid', {
extend: 'Ext.grid.Panel',
region: 'center',
collapsible: false,
split: true,
title: 'Update Log',
getPagingBar: function () {
var me = this;
me.store = Ext.create('Shopware.apps.SdgArticleUpdateImportLog.store.SdgArticleUpdateLog');
return Ext.create('Ext.toolbar.Paging', {
    store: me.store,
    dock: 'bottom',
    displayInfo: true,
    region: 'south'
});
},
getFilterPanel: function () {
var me = this;
return  Ext.create('Ext.form.Panel', {
    store: me.store,
    title: 'Filters',
    collapsible: true,
    cls: 'detail-view',
    width: 300,
    region: 'east',
    dock: 'right',
    layout: {
    type: 'vbox',
    pack: 'start',
    align: 'stretch'
    },
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Sku',
        name: '1',
        allowBlank: true,
        listeners: {
        change: function (field, value) {
            me.store.filter('sku', value);
            me.store.filters.clear();
        }
        }
    }, {
        fieldLabel: 'Timestamp',
        name: '2',
        allowBlank: true,
        listeners: {
        change: function (field, value) {
            me.store.filter('importTimestamp', value);
            me.store.filters.clear();
        }
        }
    }]
});
},
createFilterPanel: function () {
},
initComponent: function () {
var me = this;
me.dockedItems = [me.getPagingBar(), me.getFilterPanel(),
    {
    xtype: 'toolbar',
    dock: 'top',
    items: [
        , '->',
        {
        xtype: 'textfield',
        name: 'searchfield',
        cls: 'searchfield',
        width: 175,
        emptyText: '{s name="CoeSeoRoute/Toolbar/Search"}Suche{/s}',
        enableKeyEvents: true,
        clearable: true,
        checkChangeBuffer: 500,
        listeners: {
            change: function (field, value) {
            me.store.filter('search', value);
            me.store.filters.clear();
            }
        }
        }
    ]
    }
];

me.columns = me.getColumns();
me.callParent();
},

Answer 1

Try setting collapseDirection..

From the docs:

collapseDirection : String
The direction to collapse the Panel when the toggle button is clicked.

Defaults to the headerPosition

Important: This config is ignored for collapsible Panels which are direct child items of a border layout.

Specify as 'top', 'bottom', 'left' or 'right'.

Available since: 4.0.0