javascript 如何将 ExtJS 组件扩展到全屏并稍后恢复？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6114313/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to expand an ExtJS Component to fullscreen and restore it back later?
提问by petr k.
how can I expand an ExtJS (version 3.3.1) Component, e.g. a Ext.Panel nested somewhere in the document hierarchy to "fullscreen" so that it takes up the whole browser window region? I guess I need to create an Ext.Viewport dynamically and reparent the component being "expanded", but I've had no success so far. Could someone provide a working sample?
如何将 ExtJS（3.3.1 版）组件（例如嵌套在文档层次结构中某处的 Ext.Panel）扩展为“全屏”，使其占据整个浏览器窗口区域？我想我需要动态创建一个 Ext.Viewport 并重新设置被“扩展”的组件，但到目前为止我还没有成功。有人可以提供工作样本吗？
Also, I'd like to be able to restore the component to its original place at some point later, if that's at all possible.
此外，如果可能的话，我希望能够在稍后的某个时间将组件恢复到其原始位置。
I tried the following:
我尝试了以下方法：
new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
var viewPort = new Ext.Viewport({
renderTo: Ext.getBody(),
layout: "fit",
items: [ panelToBeExpanded ]
});
viewPort.doLayout();
}});
which does not work very well. Upon clicking the button, the panel panelToBeExpandedseems to take up the viewport region, but only if there is no HTML in the BODY section, otherwise viewport is not fully expanded. Also, working with the reparented panel afterwards causes weird flicker in most browsers.
这不能很好地工作。单击按钮后，面板panelToBeExpanded似乎占据了视口区域，但前提是 BODY 部分中没有 HTML，否则视口不会完全展开。此外，之后使用重新设置的面板会在大多数浏览器中导致奇怪的闪烁。
Is there a reliable way to universally (ideally temporarily) expand a component to the whole browser window?
是否有一种可靠的方法可以普遍（最好是暂时）将组件扩展到整个浏览器窗口？
UPDATE
更新
Thanks to a suggestion in the comments, creating a new maximized Ext.Window seems to be a good solution. The second part is a bit tricky though - how to move the reparented component back to its original placein DOM (and ExtJS component hierarchy) once the window is closed?
感谢评论中的建议，创建一个新的最大化 Ext.Window 似乎是一个很好的解决方案。不过，第二部分有点棘手 -一旦窗口关闭，如何将重新父组件移回DOM（和 ExtJS 组件层次结构）中的原始位置？
Thanks for your help!
谢谢你的帮助！
采纳答案by sbgoran
You could use Ext.Window.toggleMaximizemethod. I created a simple working example, check it out here
您可以使用Ext.Window.toggleMaximize方法。我创建了一个简单的工作示例，请在此处查看
Pay attention that Ext.Window is maximized inside its rendering container, so if you use "renderTo" attribute and set it to some div inside your page Window will only be as big as div that contains it. That is why I used document body to render myWindow. Of course you could also use Ext.Window.xand Ext.Window.yconfiguration attributes to locate your window in wanted place.
请注意 Ext.Window 在其渲染容器内最大化，因此如果您使用“renderTo”属性并将其设置为页面内的某个 div，则 Window 将仅与包含它的 div 一样大。这就是我使用文档正文来呈现 myWindow 的原因。当然，您也可以使用Ext.Window.x和Ext.Window.y配置属性将您的窗口定位到想要的位置。
回答by Rob
This is a little late but stumbled upon this only now and remembered I had to do something similar and ended up overriding the text-area component which would automatically expand to full-screen on doubleclick by creating a copy of the component in a full-size window. On closing the values are automatically updated in the instantiating component which was hidden behind the full-screen window and hence never was taken out of the dom in the first place.
这有点晚了，但直到现在才偶然发现这一点，并记得我必须做类似的事情，并最终覆盖了文本区域组件，该组件将通过创建全尺寸组件的副本在双击时自动扩展到全屏窗户。关闭时，值会在隐藏在全屏窗口后面的实例化组件中自动更新，因此从一开始就不会从 dom 中取出。
Here's my code I think it's fairly self-explanatory.
这是我的代码，我认为它是不言自明的。
Hope it helps someone!
希望它可以帮助某人！
Rob.
抢。
/**
* Override for default Ext.form.TextArea. Growing to near full-screen/full-window on double-click.
*
* @author Rob Schmuecker (Ext forum name rob1308)
* @date September 13, 2010
*
* Makes all text areas enlargable by default on double-click - to prevent this behaviour set "popout:false" in the config
* By default the fieldLabel of the enhanced field is the fieldLabel of the popout - this can be set separately with "popoutLabel:'some string'" this will also inherit the same labelSeparator config value as that of the enhanced parent.
* The close text for the button defaults to "Close" but can be overriden by setting the "popoutClose:'some other text'" config
*/
Ext.override(Ext.form.TextArea, {
popout: true,
onRender: function(ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag: "textarea",
style: "width:100px;height:60px;",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
if (this.grow) {
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag: "pre",
cls: "x-form-grow-sizer"
});
if (this.preventScrollbars) {
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
if (this.popout && !this.readOnly) {
if (!this.popoutLabel) {
this.popoutLabel = this.fieldLabel;
}
this.popoutClose = 'Close';
var field = this;
this.getEl().on('dblclick',
function() {
field.popoutTextArea(this.id);
});
};
},
popoutTextArea: function(elId) {
var field = this;
tBox = new Ext.form.TextArea({
popout: false,
anchor: '100% 100%',
labelStyle: 'font-weight:bold; font-size:14px;',
value: Ext.getCmp(elId).getValue(),
fieldLabel: field.popoutLabel,
labelSeparator: field.labelSeparator
});
viewSize = Ext.getBody().getViewSize();
textAreaWin = new Ext.Window({
width: viewSize.width - 50,
height: viewSize.height - 50,
closable: false,
draggable: false,
border: false,
bodyStyle: 'background-color:#badffd;',
//bodyBorder:false,
modal: true,
layout: 'form',
// explicitly set layout manager: override the default (layout:'auto')
labelAlign: 'top',
items: [tBox],
buttons: [{
text: field.popoutClose,
handler: function() {
Ext.getCmp(elId).setValue(tBox.getValue());
textAreaWin.hide(Ext.getCmp(elId).getEl(),
function(win) {
win.close();
});
}
}]
}).show(Ext.getCmp(elId).getEl());
}
});
