PDA

View Full Version : while running a ajax request, see a waiting mask



ballibum
17 Sep 2009, 8:03 AM
Hello forum,
i´ve got a nice ext tool, but i am loading very often new ajax request. now i want to get a mask which is shown while loading the request and hide, if this is complet. is this possible?
thanks

dbassett74
17 Sep 2009, 8:15 AM
Right before invoking the ajax request:



var mask = new Ext.LoadMask(pnl.getEl(), { msg: 'Loading data...' });
mask.show();


Where "pnl" is the element you want the mask to display on.


Then, in the failure and success events of the ajax request:



mask.hide();


Not sure if this is the best way, but seems to work for me...

httpdotcom
17 Sep 2009, 8:47 AM
Or you could add listeners for Ajax events (beforerequest and requestcomplete) to add and remove a mask. Then, you will get a mask for all ajax events.

Ext.Ajax.on( "beforerequest",function() { -- add/show mask/spinner, etc -- } ) ;
Ext.Ajax.on( "requestcomplete",function() { -- remove/hide indicator -- } ) ;

ballibum
17 Sep 2009, 8:51 AM
oh that would be better, but how can i realize that? i can not implement prototype.js, because i am using the mapfish libarry with ext.
thanks for helping me

dbassett74
17 Sep 2009, 8:51 AM
Or you could add listeners for Ajax events (beforerequest and requestcomplete) to add and remove a mask. Then, you will get a mask for all ajax events.

But where will that mask appear? If you have individual windows that need a mask, then I think this global approach you mention won't work so well.

ballibum
17 Sep 2009, 9:05 AM
that is my programmcode:
and i want to have a please waiting in the region "center"

<script type="text/javascript">

var map, selectControl, selectedFeature,toolbarItems = [], action, actions = {}; // for debug
var centered = false;
//
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";
printConfigUrl = "http://localhost:8080/print-servlet-1.1/pdf/info.json";



Ext.onReady(function() {
//Karte und Optionen laden

var map = createMap();





//WMS Layer laden
createUebersichtLayer(map);
createOrthophotoLayer(map);
createInfrastrukturLayers(map);
createWheregroupLayer(map);
createLeerenLayer(map);

//WFS Layer & Storesladen
gebaeudestore(map);
flurststore(map);
alleraeumestore(map);
raeume0store(map);
raeume1store(map);
raeume2store(map);
raeume3store(map);
raeume4store(map);
raeume5store(map);
raeume6store(map);
raeume7store(map);

//zusätzliche Funktionen laden
wheelZoom();
createItems(map);
//Optik
var model = createTreeModel();
// var toolbar = createToolbar(map);
var layerOverrides={ "OpenLayers WMS": {overview: true},Countries: { format: 'image/svg+xml' }};
var viewport = new Ext.Viewport({
layout: "border",
listeners: {
afterlayout: centerMap,
scope: map
},
items: [{
region: "west",
id: "tools",
title: "Werkzeuge",
border: true,
width: 250,
height: (window.innerHeight/100)*60,
maxheight: (window.innerHeight/100)*60,
split: true,
collapsible: true,
tbar: toolbarItems,
items: [{border:true,
autoHeight:true,
layout:"accordion",
items:[{
id: "tree",
title: "Layer",
xtype: "layertree",
map: map,
autoHeight:true,
layout:"fit",
showWmsLegend: true,
enableDD: true,
autoScroll:true,
model: model,
plugins: [mapfish.widgets.LayerTree.createContextualMenuPlugin(['opacitySlide'])]
},{
id: "search",
title: "Suche",
map: map,
html: '<select id="wechsel" onChange="suchwechsel()"><option selected>Auswahl</option><option>Flurstücke</option><option>Gebäude</option><option>Räume</option></select><div id="auswahl"></div>',
autoHeight:true,
layout:"fit",
enableDD: true,
autoScroll:true
},{
xtype: 'print-simple',
title: 'Drucken',
layout:"fit",
autoHeight: 300,
bodyStyle: 'padding: 7px;',
formConfig: {
labelWidth: 65,
defaults: {
width: 140,
listWidth: 140
},
items: [{
xtype: 'textfield',
fieldLabel: OpenLayers.Lang.translate('mf.print.mapTitle'),
name: 'mapTitle',
value: 'Map title'
},{
xtype: 'textarea',
fieldLabel: OpenLayers.Lang.translate('mf.print.comment'),
name: 'comment',
height: 100,
value: 'Some comments'
}
]},
border: false,
map: map,
configUrl: printConfigUrl,
overrides: layerOverrides
}]}]
}, {
region: "center",
id: "map",
title: "Gelände RFH",
layout: "fit",
split: true,
xtype: 'mapcomponent',
map: map
}, {
region: "south",
id:'tabpanels',
title: 'Tabpanels',
xtype: 'tabpanel',
activeTab:1,
split: false,
collapsible: true,
autoScroll:true,
height: (window.innerHeight/100)*40,
items:[{
title: 'Flurstücke',
layout: 'fit',
items:[rfhflurPanel]
},{
title: 'Gebäude',
layout: 'fit',
id: 'gebaeudePanel1',
items:[gebaeudePanel]
},{
title: 'alle Räume',
layout: 'fit',
items:[alleraeumePanel]
},{
title: 'Etage 0',
layout: 'fit',
items:[rfhetage0Panel]
},{
title: 'Etage 1',
layout: 'fit',
items:[rfhetage1Panel]
},{
title: 'Etage 2',
layout: 'fit',
items:[rfhetage2Panel]
},{
title: 'Etage 3',
layout: 'fit',
items:[rfhetage3Panel]
},{
title: 'Etage 4',
layout: 'fit',
items:[rfhetage4Panel]
},{
title: 'Etage 5',
layout: 'fit',
items:[rfhetage5Panel]
},{
title: 'Etage 6',
layout: 'fit',
items:[rfhetage6Panel]
},{
title: 'Etage 7',
layout: 'fit',
items:[rfhetage7Panel]
}]
},{
region: "east",
id: "east",
title: "Information",
split: true,
autoheight:true,
autoScroll:true,
width:350,
collapsed: true,
collapsible: true,
html: '<div id="information"></div><div style="visibility:hidden" id="status">1</div>'
}]
});
viewport.doLayout();
// initToolbarContent(toolbar);


});
--></script>

</head>

<body>
<div id="map"></div>
</body>
</html>

and it works realy nice, but sometimes i have to wait a long time, so people which do not know that something happens a very frustated.

ballibum
17 Sep 2009, 9:35 AM
please help me, i do not know the place i have to write the ext.ajax.on code and i do not know which element i have to use for seeing the waiting screen in the center

dbassett74
17 Sep 2009, 9:45 AM
Maybe its the viewport? So:



Ext.Ajax.on( "beforerequest",function() {
var mask = new Ext.LoadMask(viewport.getEl(), { msg: 'Loading data...' });
mask.show();
}) ;
Ext.Ajax.on( "requestcomplete",function() {
mask.hide();
}) ;
This would go in the Ext.onReady block.

ballibum
17 Sep 2009, 10:17 AM
thanks for helping me, but it does not work, i thought i test another solution.

Mike Robinson
19 Sep 2009, 8:13 PM
I happen to use Ext.Msg.Wait but the principle (afaik...) seems to be the same:


Before firing the AJAX request, display a message-box.
Upon success or failure, hide it.

As long as the message-box is being displayed, the user can't interact with anything else.

I honestly don't know if there's a "generic, blanket, works-for-everything" way-to-do-it.

httpdotcom
22 Sep 2009, 3:45 AM
I believe there is a scope issue in dbassett's example. mask would need to be declared outside of the two listeners.

Also, I have had success with
obj.getEl().mask( { ... } ) ;
and
obj.getEl().unmask() ;