PDA

View Full Version : Why doesn't 'Ext.Msg.alert(...)' work while 'Ext.Msg.prompt()' does?



eddyystop
29 Feb 2012, 12:50 AM
I'm just starting with Ext JS and trying to understand the why's of the following using Ext4.

These work:
Ext.Msg.prompt('...', '...', fn);
Ext.Msg.show({...});

But this doesn't work in the latest Chrome and FF:
Ext.Msg.alert('...', '...', fn);
Chrome gives the console msg: Cannot call method 'alert' of undefined.
Why?

So I'm using:
Ext.create('Ext.window.MessageBox').alert('...', '...', fn);

GBenji
29 Feb 2012, 4:17 AM
Cause Ext.Msg is define as singleton instance of Ext.window.MessageBox but it's not an alias.

Try with (easier than your solution) : Ext.MessageBox.alert('...','...','fn');

(i'm just an user, so don't put your life in my hands :p)

vietits
29 Feb 2012, 4:26 AM
@GBenji,

Ext.MessageBox and Ext.Msg are the same.

GBenji
29 Feb 2012, 4:34 AM
Edit : nothing :s

friend
29 Feb 2012, 5:14 AM
This works perfectly for me in FF, Chrome and IE:


Ext.Msg.alert('Test!', 'Test Message', function() { console.log('alerted!') });

After clicking the alert's 'ok' button, the function executes and I see the console log message.

eddyystop
29 Feb 2012, 7:00 AM
Thanks everyone for replying.

GBenji:
None of these work for me:
// Ext.create('Ext.Msg').alert('Hello.', 'The DOM is ready!');
// Ext.Msg.alert('Hello.', 'The DOM is ready!');
// Ext.window.MessageBox.alert('Hello.', 'The DOM is ready!');
// Ext.MessageBox.alert('Hello.', 'The DOM is ready!');

friend:
I don't understand why your
Ext.Msg.alert('Test!', 'Test Message', function() { console.log('alerted!') });
works. I'm now trying to run the following inside the HTML page:

<link rel="stylesheet" type="text/css" href="../../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../../extjs/ext-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.Msg.alert('Hello.', 'The DOM is ready!', function () {
console.log('Ext.window.MessageBox.alert closed.');
});
});
</script>

and on Chrome get:
ex020102.html:13 (http://localhost/x-action/ch02/ex020102.html)Uncaught TypeError: Cannot call method 'alert' of undefined

eddyystop
29 Feb 2012, 7:09 AM
It works when I use:
<script type="text/javascript" src="../../extjs/ext-all-debug.js"></script>

So I guess the core library is insufficient.

chamacs
29 Feb 2012, 7:47 AM
Using the ext-debug.js assumes you want to dynamically load class files as you need them. To enable this you must add the following above your onReady:


Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});


Or use the Ext.require to pre load the classed you need:


Ext.require('Ext.window.MessageBox');

If dynamically loading classes, the way to create them to ensure they are loaded before use, use the following:


Ext.create('Ext.MessageBox', {...});

eddyystop
29 Feb 2012, 6:23 PM
Thank you Chamacs.
The following is my new noobie understanding. I'm most uncertain about the very last paragraph. Please correct me if I'm wrong. Thanks.

I can use
Ext.Msg.alert('...', '...', fn);

(a) with the brute-force way using

<script type="text/javascript" src="../../extjs/ext-all-debug.js"></script>

or ext-all-dev.js or ext-all.js

(b) with dynamic loading using

<script type="text/javascript" src="../../extjs/ext-dev.js"></script>
or ext-debug.js or ext.js

<script type="text/javascript">
// A leading script tag is used to ensure this is all loaded before
// the following script starts executing.
Ext.Loader.setConfig({
enabled : true,
disableCaching : false,
paths : {
// relative path where to find 'Ext.xxx' thingies
'Ext' : '../../extjs/src'
}
});
// Do asynchronous loading of classes we know we'll need
Ext.require('Ext.window.MessageBox');
</script>

<script type="text/javascript">
Ext.onReady(function () {


// Following gives: TypeError: Obj fcn () {...} has no method alert
// because 'Ext.window.MessageBox' is a class, while
// 'Ext.MessageBox' is a singleton instance of it, while
// 'Ext.Msg' is a convenience alternate name for 'Ext.MessageBox'
// Ext.window.MessageBox.alert('Hello.', 'The DOM is ready');


// Following also work
// Ext.Msg.alert('Hello.', 'The DOM is ready');
// Ext.MessageBox.alert('Hello.', 'The DOM is ready');


// If Ext.require does not exist above, this synchronously loads the class on demand
// If Ext.require exists above, Ext.Loader knows class is loaded already
var win = Ext.create('Ext.window.MessageBox');
win.alert('Hello.', 'The DOM is ready!');


});
</script>


My main uncertainty: Ext.window.MessageBox is a class (implemented as a function) and so you cannot use .alert on it. Ext.MessageBox and Ext.Msg are the same singleton instance (implemented as an object) of the class (via 'new') and so .alert can be called on them.

vietits
29 Feb 2012, 6:32 PM
My main uncertainty: Ext.window.MessageBox is a class (implemented as a function) and so you cannot use .alert on it. Ext.MessageBox and Ext.Msg are the same singleton instance (implemented as an object) of the class (via 'new') and so .alert can be called on them.

You are right.

Ext.window.MessageBox is a class so you can create as many instances from it as you want and customize them to what you want and this does not affect other instance as well as global instance Ext.MessageBox or Ext.Msg.
Ext.MessageBox and Ext.Msg are the same singleton instance of Ext.window.MessageBox. They are created right after the class Ext.window.MessageBox is created.

chamacs
29 Feb 2012, 10:01 PM
vietits (http://www.sencha.com/forum/member.php?362966-vietits) is correct. To see if I provide some more understanding: 'Ext.require' loads the class, thus instantiating the singletons Ext.Msg and Ext.MessageBox. So, they are immediately available.

If the class has never been loaded (i.e. no Ext.requires), then the singletons are not yet available. So, the load will occurs on the 'Ext.create' call; that is when the singleton would be available.

Hope that helps.