我有一个具有典型设置的手风琴面板。每个面板中曾经有一个
textarea现在我用
textareahtmleditorhtmleditortextarea编辑：另外，当重新展开时，
htmleditor使用
AccordionmyDataStore.load({params: ...}, callback: onLoadSuccess);
......
onLoadSuccess: function() {
// for each data item, create a new panel and add it to myListPanel
for (var i = 0; i < myDataStore.getTotalCount(); i++) {
var dataItem = myDataStore.getAt(i);
var newFormPanel = new Ext.FormPanel({
labelAlign: 'top',
items : [{
xtype: 'htmleditor',
fieldLabel: 'Content',
autoScroll: true,
enableFont: false,
enableLists: false,
value: dataItem.get('content');
}],
buttons: [{...}]
});
// add this panel to the accordion
myListPanel.add({
title: 'Another panel',
items: [newFormPanel]
});
}
myListPanel.doLayout();
}
当前
Accordionvar myListPanel = new Ext.Panel({
autoHeight : true,
autoWidth: true,
autoScroll : true,
layout : 'accordion',
layoutConfig : {
titleCollapse: true,
animate: true,
fill : false,
autoWidth: true,
hideCollapseTool: true,
},
});
对我来说，
htmleditor但是，一种解决方案是侦听
collapseexpand我在 ExtJS 6.2.2 下的可折叠边框布局也遇到了类似的问题。
我将其固定在 HtmlEditor 丢失其内容的位置：
Ext.dom.Element.slideIn() -> Ext.dom.Element.wrap() -> Ext.dom.Element.appendChild() -> 行
me.dom.appendChild(el)HtmlEditor 的 DOM 附加到动画包装器后，HtmlEditor 的 iframe 内容将丢失。
解决方法是在面板配置中设置
animCollapse: falsefloatable: false}, {
region: 'east',
xtype: 'ip_tasks_descriptionremarkspanel',
width: 980,
split: true,
collapsible: true,
collapsed: true,
animCollapse: false, // <---------
floatable: false // <---------
}, {
如果您想使用可浮动功能（
floatable: trueaddedExt.override(Ext.panel.Panel, {
floatCollapsedPanel: function() {
var me = this,
placeholder = me.placeholder,
splitter = me.splitter,
phBox = Ext.util.Region.from(placeholder.getBox(false, true)),
floatCls = Ext.panel.Panel.floatCls,
collapsed = me.collapsed,
layoutOwner = me.ownerCt || me,
slideDirection, myBox,
hoverlisteners = {
mouseleave: me.onMouseLeaveFloated,
mouseenter: me.onMouseEnterFloated,
scope: me,
destroyable: true
};
if (me.isSliding) {
return;
}
// Already floated
if (me.el.hasCls(floatCls)) {
me.slideOutFloatedPanel();
return;
}
me.isSliding = true;
// Lay out in fully expanded mode to ensure we are at the correct size, and collect our expanded box
placeholder.el.hide();
placeholder.hidden = true;
me.el.show();
me.setHiddenState(false);
me.collapsed = false;
layoutOwner.updateLayout();
// Then go back immediately to collapsed state from which to initiate the float into view.
placeholder.el.show();
placeholder.hidden = false;
me.el.hide();
me.setHiddenState(true);
me.collapsed = collapsed;
layoutOwner.updateLayout();
myBox = me.getBox(false, true);
if (me.fireEvent('beginfloat', me) === false) {
return;
}
me.slideOutTask = me.slideOutTask || new Ext.util.DelayedTask(me.slideOutFloatedPanel, me);
// Tap/mousedown/mousemove outside the floated element, its placeholder, or its splitter slides it back.
me.pointerLeaveListener = Ext.getDoc().on({
mousedown: me.onFloatedPointerEvent,
mousemove: me.onFloatedPointerEvent,
scope: me,
destroyable: true
});
if (!me.placeholderListener) {
me.placeholderListener = placeholder.on({
resize: me.onPlaceholderResize,
scope: me,
destroyable: true
});
}
me.phHoverListeners = placeholder.el.on(hoverlisteners);
me.elHoverListeners = me.el.on(hoverlisteners);
me.el.addCls(floatCls);
me.floated = collapsed;
// Hide collapse tool in header if there is one (we might be headerless)
if (me.collapseTool) {
me.collapseTool.el.hide();
}
if (splitter) {
phBox = phBox.union(splitter.getBox(false, true));
}
switch (me.collapsed) {
case 'top':
me.width = phBox.width;
me.setLocalXY(myBox.x, myBox.y + phBox.height);
break;
case 'right':
me.height = phBox.height;
me.setLocalXY(myBox.x - phBox.width, myBox.y);
break;
case 'bottom':
me.width = phBox.width;
me.setLocalXY(myBox.x, myBox.y - phBox.height);
break;
case 'left':
me.height = phBox.height;
me.setLocalXY(myBox.x + phBox.width, myBox.y);
break;
}
slideDirection = me.convertCollapseDir(me.collapsed);
// Remember how we are really collapsed so we can restore it, but also so we can
// become a layoutRoot while we are floated:
me.floatedFromCollapse = me.collapsed;
me.collapsed = false;
me.setHiddenState(false);
if (me.animCollapse) { // added
me.el.slideIn(slideDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: function() {
me.isSliding = false;
me.fireEvent('endfloat', me);
me.fireEvent('float', me);
}
}
});
} else { // added
me.el.show(); // added
me.isSliding = false; // added
me.fireEvent('endfloat', me); // added
me.fireEvent('float', me); // added
} // added
},
privates: {
slideOutFloatedPanel: function(preventAnimate) {
var me = this,
compEl = me.el,
collapseDirection, focusTarget,
afterSlideOut = function() {
me.slideOutFloatedPanelEnd();
// this would be in slideOutFloatedPanelEnd except that the only other
// caller removes this cls later
me.el.removeCls(Ext.baseCSSPrefix + 'border-region-slide-in');
// Event fired when floated stateus ends
me.fireEvent('endfloat', me);
};
if (me.isSliding || me.destroyed) {
return;
}
me.isSliding = true;
me.floated = false;
me.slideOutFloatedPanelBegin();
if (preventAnimate) {
compEl.hide();
return afterSlideOut();
}
if (typeof me.collapsed === 'string') {
collapseDirection = me.convertCollapseDir(me.collapsed);
}
me.fireEvent('beginfloat', me);
if (me.animCollapse) { // added
compEl.slideOut(collapseDirection, {
preserveScroll: true,
duration: Ext.Number.from(me.animCollapse, Ext.fx.Anim.prototype.duration),
listeners: {
afteranimate: afterSlideOut
}
});
} else { // added
compEl.hide(); // added
afterSlideOut(); // added
} // added
// Focus the placeholder which should delegate into itself
if (this.containsFocus) {
focusTarget = this.findFocusTarget();
if (focusTarget) {
focusTarget.focus();
}
}
}
}
});