Как расширить компонент ExtJS до полноэкранного режима и восстановить его позже?

Question

как мне расширить компонент ExtJS (версия 3.3.1), например Ext.Panel вложена где-то в иерархии документа в «полный экран», чтобы он занимал всю область окна браузера? Я предполагаю, что мне нужно создать Ext.Viewport динамически и переписать компонент, который «расширяется», но пока я не добился успеха. Может ли кто-нибудь предоставить рабочий образец?

Кроме того, я хотел бы иметь возможность восстановить компонент на прежнее место через некоторое время, если это вообще возможно.

Я попробовал следующее:

new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
    var viewPort = new Ext.Viewport({
        renderTo: Ext.getBody(),
        layout: "fit",
        items: [ panelToBeExpanded ]
        });
    viewPort.doLayout();
}});

, который не очень хорошо работает. При нажатии кнопки панель panelToBeExpanded, кажется, занимает область области просмотра, но только если в разделе BODY нет HTML, в противном случае область просмотра не будет полностью развернута. Кроме того, работа с перекрашенной панелью впоследствии вызывает странное мерцание в большинстве браузеров.

Существует ли надежный способ универсального (в идеале временного) расширения компонента на все окно браузера?

UPDATE

Благодаря предложению в комментариях создание нового развернутого окна Ext.Window представляется хорошим решением . Вторая часть немного сложна - как переместить перекомпонованный компонент обратно в исходное место в DOM (и иерархию компонентов ExtJS) после закрытия окна?

Спасибо за вашу помощь!

Answer 1

Вы можете использовать Ext.Window.toggleMaximize метод. Я создал простой рабочий пример, посмотрите здесь

Обратите внимание, что Ext.Window развернуто внутри его контейнера рендеринга, поэтому, если вы используете атрибут renderTo и задаете для него какой-либо элемент div внутри вашей страницы, окно будет иметь такой же большой размер, как и элемент div, содержащий его. Вот почему я использовал тело документа для рендеринга myWindow. Конечно, вы также можете использовать Ext.Window.x и Ext.Window.y атрибуты конфигурации, чтобы найти ваше окно в нужном месте.

Answer 2

Это немного поздно, но я наткнулся на это только сейчас и вспомнил, что мне пришлось сделать что-то подобное, и в итоге переопределил компонент текстовой области, который автоматически расширялся до полноэкранного режима при двойном щелчке, создавая копию компонента вполноразмерное окно.При закрытии значения автоматически обновляются в компоненте создания экземпляров, который был спрятан за полноэкранным окном и, следовательно, никогда не был извлечен из домена.

Вот мой код, я думаю, он довольно понятен.

Надеюсь, это кому-нибудь поможет!

Роб.

/**
 * 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());
    }

});