За окна сообщений в ExtJS ответственен класс Ext.MessageBox (Более краткое написание Ext.Msg). Далее мы рассмотрим несколько примеров. В принципе все аналогично методам традиционного javascript – alert, prompt, confirm и так далее.
Простейший alert
1 2 3 4 5 |
Ext.onReady(function(){ Ext.Msg.alert('Header of message box', 'Hello from ExtJS. This is Ext.Msg.alert'); //либо, другой вариант //Ext.MessageBox.alert('Header', 'Hello from ExtJS');//<<< Сработает аналогично верхнему }); |
В данном примере окно сообщения вызывается сразу же после загрузки.
Ext.Msg.show – аналог сonfirm в JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
Ext.onReady(function(){ Ext.Msg.show({ title:'Save Changes?', message: 'You are closing a tab that has unsaved changes. Would you like to save your changes?', buttons: Ext.Msg.YESNOCANCEL, icon: Ext.Msg.QUESTION, fn: function(btn) { if (btn === 'yes') { alert('Вы нажали Да'); } else if (btn === 'no') { alert('Вы нажали нет'); } else { alert('Вы нажали Выход'); } } }); }); |
По кнопкам – существуют следующие варианты кнопок (взято из api)
A bitwise button specifier consisting of the sum of any of the following constants:
Some common combinations have already been predefined:
Вообще, у этого метода очень много параметров и настроек, кому интересно – залезьте в документацию.
Ext.Msg.prompt
1 2 3 4 5 6 7 8 9 |
Ext.onReady(function(){ Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){ if (btn == 'ok'){ alert('Вы знаете, что Ваше имя '+text+'?'); } }); }); |
Ext.MessageBox это класс c параметром singletone
То есть создается один экземпляр класса. Если создается другой – предыдущий закрывается. В этом можно убедиться на простом примере, вложив Ext.Msg.show в Ext.Msg.show
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
Ext.onReady(function(){ Ext.create('Ext.Button', { margin:'50 10 10 70', text: 'You can press here', renderTo: Ext.getBody(), listeners: { click: function(){ Ext.Msg.show({ title:'Save Changes?', message: 'Это первое сообщение, нажмите ещё раз', buttons: Ext.Msg.OK, icon: Ext.Msg.QUESTION, fn: function(btn) { if (btn === 'ok') { Ext.Msg.show({ title:'Save Changes?', message: 'Это уже другое сообщение, предыдущее закрылось', buttons: Ext.Msg.OK, icon: Ext.Msg.QUESTION, fn: function(btn) { if (btn === 'ok') { alert('Вы нажали Ok ещё раз'); } } }); } } }); }, scope:this } }); }); |
У класса Ext.MessageBox – очень много разных методов. Все они подробно описаны в документации.