ExtJS、FormPanel show() 函数问题答案

【问题标题】：ExtJS, FormPanel show() function issueExtJS、FormPanel show() 函数问题
【发布时间】：2011-11-04 00:32:32
【问题描述】：

我想使用 FormPanel show() 函数将其显示为弹出窗口。

但下面的代码没有显示任何内容。但是如果我将此 formPanel 传递给 ExtJS Window 对象并调用 window show() 函数工作正常。

我想避免创建一个新的 Window 对象只是为了显示一个表单面板。我该怎么做？

    var formPanelItems = ...
    var formPanel = new Ext.form.FormPanel({
       width: 300px,
       height: 300px,
       items        : formPanelItems,
    });
    formPanel.show();

【问题讨论】：

标签： javascript extjs extjs3

【解决方案1】：

根据 Ext 的文档，你需要设置配置属性 floating:true 并在渲染后显式设置它的位置，因为它是绝对定位的。

一个样本：

var p = new Ext.form.FormPanel({
        title:'test', 
        width: 300, 
        height: 150, 
        html:'a floating panel', 
        floating: true, 
        renderTo: Ext.getBody()
}); 
p.setPosition(200,200);

【讨论】：

renderTo: Ext.getBody() 应该将面板本身居中；因此，setPosition() 可能不是必需的（我使用 Ext 5.*）。

【解决方案2】：

您需要设置配置属性floatable: true。它会告诉控件不将自身呈现给页面上的某个父元素，而是直接呈现给body

http://docs.sencha.com/ext-js/4-0/source/Panel3.html#Ext-panel-Panel-cfg-floatable

【讨论】：

我们有 ExtJS 3.1 版，此版本中不提供可浮动选项。关于 3.1 中的类似选项有什么想法吗？
我已经检查了我的本地文档中的 3.1 修订版及其那里（源自 Ext.Panel。它也存在于在线 3.4 版本中 docs.sencha.com/ext-js/3-4/#!/api/…

【解决方案3】：

试试看这个，可能有用： Dockable/floatable panels in ExtJS?

【讨论】：