在 dockedItems 中折叠过滤器面板
Collapse Filter Panel in dockedItems
你好,我正在努力处理停靠的项目,我试图折叠我的过滤器面板,但这确实有效,而且折叠箭头在错误的一侧,有人知道我该如何修复它。我正在创建一个 getFilterPane 并 return 它在 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();
},
尝试设置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
你好,我正在努力处理停靠的项目,我试图折叠我的过滤器面板,但这确实有效,而且折叠箭头在错误的一侧,有人知道我该如何修复它。我正在创建一个 getFilterPane 并 return 它在 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();
},
尝试设置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