PDA

View Full Version : New MessageBox Window



olivierpons
22 Jan 2010, 8:25 AM
Hi all I don't know whether this is the good place to share my idea, but here's the problem I've had and how I solved it.
I had a TreePanel that may need to download ASAP when the HTML is opened.
Thus I used then the loader property in an inherited way. It looks like this:


LabyzTree = function() {
LabyzTree.superclass.constructor.call(this, {
id:'laby-tree',
region:'west',
split:true,
// snip blabla declarations
loader: new Ext.tree.TreeLoader({
dataUrl: '../_admin/json/labys.php'
}),
root: new Ext.tree.AsyncTreeNode({
id: 'labys',
text: 'Labyrinthes',
draggable: false,
singleClickExpand:true
}),


Then, as an optimistic guy, I needed to simulate server errors. That's what I did and I added this code to handle the problems: two listeners:


// snip blabla declarations
loader: new Ext.tree.TreeLoader({
dataUrl: '../_admin/json/labys.php',
scope: this,
listeners: {
load: function(tl, node, response) {
var b = Ext.util.JSON.decode(response.responseText);
if (b.success==false) {
if (b.loginfirst==true) {
// do some stuff
} else if (b.msg) {
// do some stuff
}
}
},
loadexception: function(tl, node, response) {
if (response.status==200) {
if (response.responseText!='') {
var b = Ext.util.JSON.decode(response.responseText);
if (b.success==false) {
if (b.loginfirst==true) {
// do some stuff
}
}
}
}
}
}
}),


The problem was that Ext.MessageBox didn't show up on the first AJAX call (= first try). I'm pretty sure this was because of not fully rendered items or whatever but anyway I found a solution that may not be the best but it works and it doesn't look "too" ugly to me:
I've made my own WindowErrorPanel and I show it. Here's the code that generates a WindowErrorPanel:


WindowErrorPanel = function(errorString) {
WindowErrorPanel.superclass.constructor.call(this, {
layout:'fit',
width:300,
height:150,
closable: false,
resizable: false,
plain: true,
modal: true,
border: false,
frame:true,
title:'Erreur',
items: [{
html:errorString,
readonly: true,
frame:true,
width:'99%',
height:'99%'
} ],
destroyTask: new Ext.util.DelayedTask(function(){
this.destroy();
},this),
buttons:[{
text:'Ok',
scope: this,
handler:function(btn){
btn.disable();
this.destroyTask.delay(50);
}
}]
});
};
Ext.extend(WindowErrorPanel, Ext.Window, {
initComponent: function(){
WindowErrorPanel.superclass.initComponent.call(this);
}
});


The only thing that looks ugly to me is the timer that is launched to destroy the modal Window. (I coded it the same way for my own WindowLoginPanel.)
And here's the final "loader" code in my TreePanel:


loader: new Ext.tree.TreeLoader({
scope: this,
dataUrl: '../_admin/json/labys.php',
listeners: {
load: function(tl, node, response) {
var b = Ext.util.JSON.decode(response.responseText);
if (b.success==false) {
if (b.loginfirst==true) {
new WindowLoginPanel().show();
} else if (b.msg) {
new WindowErrorPanel(
'Server error&nbsp;:<br />'+
b.msg+'<br />'+
'You have to refresh the page.').show();
}
}
},
loadexception: function(tl, node, response) {
if (response.status==200) {
if (response.responseText!='') {
var b = Ext.util.JSON.decode(response.responseText);
if (b.success==false) {
if (b.loginfirst==true) {
new WindowLoginPanel().show();
}
}
}
}
}
}
}),


If you have any suggestions or maybe a more elegant way to close the window (see code above), you're welcome!

I hope this helps someone, one day ;)

Olivier Pons