.. / 2. Модальные сообщения в ExtJS. Ext.window.MessageBox

  1. ExtJS-4

На этой странице сразу несколько примеров с различными модальными окнами-сообщениями. Вызовы оформлю в виде функция и привяжу к нажатию кнопок

1 Определение нажатой кнопки. Сonfirm

В предыдущем примере, как и положеннно для alert, всего одна кнопка, по нажатию которой окно закрывается. Это скучно. Интереснее когда по нажатию кнопки можно делать какое-либо действие, как в случае с JavaScript функцией confirm(). Код вызова тестовых функций здесь и далее для краткости опускаю.

   <script>
      function a(){ Ext.MessageBox.show({
                 title:'Пример 2a',
                 msg: 'Проверим как работают кнопочки',
                 fn: function(btn) {
                          alert('Клик-клак!  Вы нажали кнопку «'+btn+'»');
                      }

             })}
   </script>

В примере я вывел кнопки «yes», «no», «cancel». Это дефолтные кнопки. Всего по дефолту возможно несколько наборов:
YES, YESNO, YESNOCANCEL, OK, OKCANCEL.

2 Ввод данных. Prompt

Здесь выведу аналог js-prompt - окошка в котором можно ввести какие-то пользовательские данные.

   <script>
     function b()
          { Ext.MessageBox.prompt(
               'Имя',
               'Введите ваше имя:',
                function(btn, text) {alert('текст: «'+text+'»; Кнопка: «'+btn+'»');}
               );
          }
   </script>
 

3 Примечание. ExtJS.MessageBox - Singleton


Окошки которые создаются при помощи MessageBox могут существовать только в единственном числе. Если вывести сначала одно окно, а затем сразу втрое, первое - исчезнет. Т.е. рассмотренные методы ExtJS.MessageBox служат для того же, для чего служат аналогичные функции (методы window) в JavaScript - prompt,confirm и alert

       <script>
        function с(){ Ext.MessageBox.show({
               title:'Окно 1',
               msg: 'Проверим как работает вызов одного сообщения из другого',
               buttons: Ext.MessageBox.OK,
               fn: function(btn) { Ext.MessageBox.show({
                                   title:'Окно 2',
                                   msg: 'Вызывающее окно пропало',
                                   buttons: Ext.MessageBox.OK
                               })
                    }
           })}
         </script>
         <button   

4 Немного красоты

Ниже пример украшательств: добавим красивую иконку к тексту, зададим размер, уберем кнопку закрытия окна.

<script>
function d(){ Ext.MessageBox.show({
               title:'Пример 2d',
               msg: 'Красота ExtJS помноженная
                     на размер его кода - чудовищная сила',
               buttons: Ext.MessageBox.OK,
               icon: Ext.MessageBox.WARNING,    // иконка мб {ERROR,INFO,QUESTION,WARNING}
               width:300,                       // есть еще minWidth
               closable:false,                  // признак наличия икнки закрытия окна
            });
       }
 </script>
         

Всего у окна (Ext.window) и его потомков более сотни различных методов и свойств, позволяющих изменять их внешний вид и поведение. Подробнее см. документацию

5 И еще немного

И еще немного вариантов модальных окон, например с разными вариантами индикаторов загрузки (progress bar), можно посмотреть на странице с примерами.

6. Далее

  1. Окна (Ext.window.Window) Часть 1. Конфигурирование, методы
  2. Окна (Ext.window.Window) Часть 2. События
  1. 2011-11-12
  2. ExtJS-4
  1. docs.sencha.com/ext-js/4-0/#!/api/Ext.window.MessageBox - docs.sencha.com: Ext.window.MessageBoxView
Go Index Test