面板折叠 ExtJS 上的 HTMLEditor 文本区域丢失数据

Posted 2023-02-26

【中文标题】面板折叠 ExtJS 上的 HTMLEditor 文本区域丢失数据

【英文标题】：Lost data of HTMLEditor textarea on Panel Collapse ExtJS

【发布时间】：2012-12-25 10:19:33

【问题描述】：

我正在使用 Ext 3.4 制作带有一些表单的应用程序。

我在 Ext.panel 中有一个表单，折叠属性设置为 true，因为我希望它是可折叠的。

使用 ExtJS 3.4 提供的加载方法将来自 DataBase 的数据加载到我的表单中。

问题是，当面板在被用户折叠后“展开”时，属于 HTMLEditor 小部件的文本区域已被清空。

为了解决这个问题，我可以在面板以某种方式展开时将数据重新加载到表单中，但我知道这不是最好的方法（最好的方法是在折叠面板时不丢失数据）。

如果有人遇到过这个问题或有人知道解决这个问题的方法，请分享此信息。我将不胜感激。

【参考方案1】：

在Ext JS中，面板折叠是通过样式（显示、可见性或偏移）隐藏它的主体来实现的，默认情况下展开/折叠后绝对不会清除内部面板数据。你使用普通的 Ext JS 吗？

尝试诊断为什么会发生这种情况 - 最好的方法是附加 Ext 的调试版本，并逐步执行展开/折叠方法。

您还可以检查是否有任何侦听器附加到beforecollapse、collapse、beforeexpand、expand 事件。您可以通过查看面板的events 属性来做到这一点。例如：console.log(panel.events.collapse.listeners)。

您可以做的另一件事是将处理程序附加到onreset 事件，以查看是否调用了表单上的reset。附加监听器的代码：formPanel.getForm().el.on('reset', function() alert('reset'); );

【讨论】：

我已经意识到这个问题只出现在属于 htmlEditor 的 textarea 包含在可折叠面板中，所以我修改了帖子。谢谢

【参考方案2】：

我尝试了很多方法来解决这个问题，但无论如何都不起作用。

最后，我查找了Ext.panel.Panel的所有属性，找到了一个名为collapseMode的属性。所以我将collapseMode:'header'添加到面板中，htmleditor中的数据不会再丢失了。

我的代码：

                xtype: 'panel',
                region: 'south',
                itemId: 'remarkWrap',
                height: 140,
                //style: 'margin-top:10px;',
                layout: 'fit',
                title: 'title',
                collapsible: true,
                plain: true,
                hideMode: 'offsets',
                resizable:
                    handles:'n',
                    minHeight: 140,
                    maxHeight:500,
                    pinned:true,
                ,
                titleCollapse : true,
                collapseMode:'header',
                items: [
                    xtype: 'htmleditor',
                    itemId: 'remarkInput',
                    labelAlign: 'top',
                    inputAttrTpl: "spellcheck='false'",
                    readOnly : true
                ]