折叠停靠项中的过滤器面板答案

【问题标题】：Collapse Filter Panel in dockedItems折叠停靠项中的过滤器面板
【发布时间】：2015-11-11 02:50:59
【问题描述】：

您好，我正在与停靠的项目作斗争，我试图折叠我的过滤器面板，但这确实有效，colappse 箭头在错误的一侧，有人知道我该如何解决它。我正在创建一个 getFilterPane 并将其作为工具栏项在 initComponenet 中返回。

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();
},

【问题讨论】：

我无法折叠过滤器面板...例如docs.sencha.com/extjs/4.0.7/#!/example/layout/border.html

标签： forms extjs filter panel collapse

【解决方案1】：

尝试设置collapseDirection..

来自文档：

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

【讨论】：