Chapter 9: Windows and Dialogs
Opening a dialog
Dialogs
Off the shelf
JAVASCRIPT:
-
Ext.Msg.alert('Hey!', 'Something happened.');
-
-
-
-
Ext.Msg.prompt('Hey!', 'Tell me something', function(btn, text){
-
-
if(btn == 'ok'){
-
-
var data = text;
-
-
}
-
-
}, this, false, '');
Confirmation
JAVASCRIPT:
-
Ext.Msg.confirm('Hey!', 'Is this ok ?', function(btn, text){
-
-
if(btn == 'yes'){
-
-
//do some stuff
-
-
}else{
-
-
//do some stuff
-
-
}
-
-
});
It's all progressing nicely
JAVASCRIPT:
-
Ext.Msg.progress('Hey!', 'We\'re waiting ...', 'progressing');
-
-
-
-
var count = 0;
-
-
-
-
var interval = window.setInterval(function(){
-
-
count = count + 0.04;
-
-
Ext.Msg.updateProgress(count);
-
-
if(count>= 1){
-
-
window.clearInterval(interval);
-
-
Ext.Msg.hide();
-
-
}
-
-
}, 100);
Roll your own
We can use Ext.Msg.show() to create a custom dialog, which takes a config object to descide its manner.
Behavior
Windows
Starting examples
JAVASCRIPT:
-
var w = new Ext.Window({
-
-
height:100,
-
-
width:200,
-
-
title:'A Window',
-
-
html:'<h1>Oh</h1><p>HI THERE EVERYONE</p>'
-
-
});
-
-
w.show();
Paneling potential
Layout
Configuration
When I'm cleaning windows
The extras
Desktopping
Further options
The collapse option lets a window act like one in the Linux desktop.
Framing our window
Manipulating
Events
State handling
JAVASCRIPT:
-
var w = new Ext.Window({
-
-
stateful = true,
-
-
stateevents:['resize']
-
-
});
Window management
Default window manager behavior
When your create an Ext.Window, it will automatically be assigned to a default Ext.WindowGroup which, by default, can always be refered to via the Ext.WindowMgr class.
You can create more WindowGroups and assign your windows to them via the manager option.
It's the same with Ext.Window.toFront , but safer.
