Ext.MessageBox inline on your page

[chazmatazz]

Using ext 2.0, I wanted to show an Ext.MessageBox inline on a page, instead of in a modal dialog. Specifically, I wanted the info, error and warning icons to show up. I created this code snippet to make a reasonable facsimile:



Ext.onReady(function()
{
var loginMessageContent = Ext.get('loginMessageContent');

if(loginMessageContent != null) {

var title = '';
var icon = '';
if (loginMessageContent.hasClass('error')) {
title = 'Error';
icon = '<img src="../ext-2.0/resources/images/gray/window/icon-error.gif" style="float:left;padding:0 10px 0 0" />';
} else if (loginMessageContent.hasClass('warning')) {
title = 'Warning';
icon = '<img src="../ext-2.0/resources/images/gray/window/icon-warning.gif" style="float:left;padding:0 10px 0 0" />';
} else if (loginMessageContent.hasClass("question")) {
title = 'Question';
icon = '<img src="../ext-2.0/resources/images/gray/window/icon-question.gif" style="float:left;padding:0 10px 0 0" />';
} else { // info
title = 'Information';
icon = '<img src="../ext-2.0/resources/images/gray/window/icon-info.gif" style="float:left;padding:0 10px 0 0" />';
}

loginMessageContent.setVisible(false);
var loginMessage = icon + loginMessageContent.dom.firstChild.nodeValue;

var msg = new Ext.Panel ({
renderTo: 'loginMessage',
width: 250,
style: "margin: 0px auto 20px auto;",
bodyStyle:'padding:5px 5px 5px 5px;',
html: loginMessage,
frame: true,
title: title
});
}
});


The html page looks like



...
<div id="loginMessage"></div>
<div id="loginMessageContent" class="info">You have been logged out of the system.</div>
...


http://extjs.com/forum/attachment.php?attachmentid=3461&stc=1&d=1198168445

I'm sure that there is a better way to do this, but it works.