ExtJS Window Всплывающие окна

Для вывода всплывающего окна Window в ExtJS воспользуйтесь следующим кодом:

<script type="text/javascript">
function showWindow(){
    if(!win){
        var win = Ext.create('widget.window',{ // создание окна
            title: 'Заголовок окна',
            html: '<h1>Текст окна.</h1> Данный текст появляется внутри окна.',
            x:400, // позиция на экране данного окна относительно родительского окна по оси X
            y:400, // позиция на экране данного окна относительно родительского окна по оси Y
            width: '30%', // ширина окна может быть задана в px,%, em
            autoHeight: true, // установка автоматического определения высоты окна в зависимости от его содержимого
            autoScroll: true, // разрешение прокрутки содердимого окна, если текст не влезает
            maximizable: true, // значок "раскрыть окно на весь экран"
            bodyCls:'red', // установка класса для содержимого окна, который может быть привящан к CSS
            bodyPadding:'10px', // установка паддинга для содержимого внутри окна.
            bodyStyle: 'background-color: #ffffff', // прямое указание стиля для содержимого окна
            closeAction: 'hide',// !!! Важно. Указание на то, что окно при закрывании не удаляется вместе с содержимым,   
/*  этот блок параметров лишний. Они и так выставлены по умолчанию так, как указано ниже: */   
            shadow: true, // тень
            resizable: true, // возможность изменения размеров окна
            draggable: true, // возможность перетаскивания окна
            closable:  true, // спрятать иконку закрытия окна в заголовке
            modal: false, //  modal делает окно модальным, то есть становятся недоступны все другие элементы на странице
            headerPosition: 'top' //  заголовок  и кнопку закрытия разместим справа {left, top, right, bottom}
});  
    }
    win.show();
}
</script>
<input type="button" value="Показать всплывающее окно" onclick="showWindow();" />

В результате ExtJS выведет на экран всплывающее окно Window.



Всплывающие окна в ExtJS могут содержать самое разнообразно содержимое, как например в данном коде:

Ext.require([
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.layout.container.Border'
]);

Ext.onReady(function(){
    var win;
    var button = Ext.get('show-btn');

    button.on('click', function(){

        if (!win) {
            win = Ext.create('widget.window', {
                title: 'Layout Window',
                closable: true,
                closeAction: 'hide',
                width: 600,
                minWidth: 350,
                height: 350,
                layout: {
                    type: 'border',
                    padding: 5
                },
                items: [{
                    region: 'west',
                    title: 'Navigation',
                    width: 200,
                    split: true,
                    collapsible: true,
                    floatable: false
                }, {
                    region: 'center',
                    xtype: 'tabpanel',
                    items: [{
                        title: 'Bogus Tab',
                        html: 'Hello world 1'
                    }, {
                        title: 'Another Tab',
                        html: 'Hello world 2'
                    }, {
                        title: 'Closable Tab',
                        html: 'Hello world 3',
                        closable: true
                    }]
                }]
            });
        }
        button.dom.disabled = true;
        if (win.isVisible()) {
            win.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            win.show(this, function() {
                button.dom.disabled = false;
            });
        }
    });
});

В результате выполнения кода на экран будет выведено следующее окно:



Объект Ext.Window очень большой и сложный. Поэтому прежде всего необходимо обратить внимание на свойство items. Items - это массив содержащий в себе различные объекты внутри окна.

Объекты можно добавлять в окно динамически:

// Создаем текстовое поле Имя
var nameField = new Ext.form.TextField({
        fieldLabel: 'Имя',
        id:'name'
});

// Создаем текстовое поле Емейл
var emailField = new Ext.form.TextField({
        fieldLabel: 'Е-мейл',
        id:'email'
});

var form = new Ext.form.FormPanel({
        // Перечисляем в массиве элементы формы
        items: [nameField, emailField]          
})

// Создаем окно
var win = new Ext.Window();

// Добавляем к окну элемент form
win.add(form);

// Показываем окно
win.show();



К окну в ExtJS можно применять множество различных методов, влияющих на его поведение динамически, таких как:

<button onclick="show()">Показать</button>
<button onclick="hide()">Спрятать</button>
<button onclick="upDn(100)">Сместить вниз</button>
<button onclick="upDn(-100)">Сместить вверх</button>
<button onclick="lfRt(100)">Сместить вправо</button>
<button onclick="lfRt(-100)">Сместить влево</button>

Вызов стандартных методов Ext.window без дополнительных параметров:

<button onclick="f('collapse')">Свернуть</button>
<button onclick="f('expand')">Развернуть</button>
<button onclick="f('center')">Установить в центр</button>
<button onclick="f('disable')">disable</button>
<button onclick="f('enable')">enable</button>
<button onclick="f('toggleCollapse')">toggle</button>

<script type="text/javascript">

function hide() {
    if (win) win.hide(); // спрятать окно используя метод Ext.window.hide
}

// Чтобы не плодить функция типа function hide() для выполнения каждого метода Ext.window
// я написал функцию, в которую нужный метод передается в виде параметра.
// Перед выполнением функции-метода проверяем создано ли окно и является ли оно видимым.
// Если окно невидимо или не существует, то выдается предупреждение.

function f (method) {

    if (!win) { // ЕСЛИ окна еще нет, то оно создается.
       show();
    }

    // Проверка видимости окна. isVisible() - соответствующий  метод Ext.window
    // Если окно невидимо, то устанавливается признак видимости.

    if (!win.isVisible()){ 
        //  isVisible() - метод Ext.window для проверки видимости окна win.show();
        //  Если окно невидимо, то устанавливается признак видимости.
    }

    if (win[method]) { // Проверка наличия метода Ext.window
        win[method](); // Если метод существует, то он выполняется
    }

}

function upDn(delta) { // Функция перемещения вверх-вниз
    var x=win.x;            // определяется координата x окна
    var y=win.y;            // определяется координата y окна win.setPosition(x,y+delta);
                                  // окно перемещается
}

function lfRt(delta) { // Функция перемещения влево-вправо
    var x=win.x;         // определяется координата x окна
    var y=win.y;         // определяется координата y окна win.setPosition(x+delta,y);
                               // окно перемещается
}

</script>