.. / 3.1 Окна ExtJS (Ext.window.Window) Конфигурирование, методы

  1. ExtJS-4

Пример 1. Конфигурирование

Она они и в ExtJS - окна. Как в любом дектопном приложении их можно перетаскивать, изменять размеры, свертывать и развертывать, управлять их свойством z-index и многая другое. Ниже пример создания окна c подробными комментариями

<script>
var win = Ext.create('widget.window',{ // создание окна
    title: 'Пример 1',
    html:<h1>Первый взгляд.</h1> Оболочка Windows является  на  сегодня  самым
                         популярным  программным продуктом. ',
    x:400,                      // позиция относительно родительского окна.
    y:400,                      // - width: '30%',
                                // ширина. Строковое значение задается по стандарту
                                // - px,%, em и т.д.
    autoHeight: true,
    autoScroll: true,           // скроллинг если текст не влезает.
    maximizable: true,          // значок «раскрыть окно на весь экран»
    bodyCls:'red',              // установка класса для содержимого окна.
                                //Здесь .css1 {background:#fff;color:red;}
    bodyPadding:'10px',         // установка паддинга для содержимого.
                                // Лучше конечно через bodyCls
    bodyStyle: 'background-color:#fff', // прямое указание стиля для содержимого окна
    closeAction: 'hide',        // !!! Важно. Указание на то, что окно при закрывании
                                // не удаляется вместе с содержимым,

    /*  этот блок параметров лишний. Они и так выставлены
    по умолчанию так как указано ниже  */

    shadow: true,               // тень
    resizable: true,            // возможность изменения размеров окна.
    draggable: true,            // возможность перетаскивания окна.
    closable:  true,            // спрятать иконку закрытия окна в заголовке
    modal: false                //  modal задает модальное окно.
                                // При открсытии делает недоступными все остальные окна
    headerPosition: 'top', //  заголовок  и кнопку закрытия разместим
                                //справа {left, top, right, bottom}
});


</script>

У Ext.window может быть больше сотен методов и свойств. Подробнее можно посмотреть в документации

Пример 2. Методы

<script>

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>
<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>

3. Далее

  1. Окна (Ext.window.Window) Часть 2. События
  2. Пара слов об устройстве компонент ExtJS
  3. Лэйоуты. Как все красиво разместить внутри окна
  4. Инструментальные панели. Часть 1. Кнопки
  5. Инструментальные панели. Часть 2. Меню

Далее

  1. Инструментальные панели. Часть 2. Меню
  2. Панель с закладками
  1. 2011-11-12
  2. ExtJS-4
  1. docs.sencha.com/ext-js/4-0/#!/api/Ext.window.Window - docs.sencha.com: Ext.window.WindowView Документация на docs.sencha.com
Go Index Test