PDA

View Full Version : Block the screen until the store loads completely



kulshreshtha.s
9 Aug 2011, 12:20 AM
Hi,

How can I block the screen until the store completely loads itself? I'm trying to add some markers on the map and it shows me as undefined, if I click on the info window before the store completely loads.

I'm facing same issue when screens switches before the store loads.



dealraiser.views.DealraiserMap = Ext.extend(Ext.Panel,{

fullscreen : true,
layout: 'fit',
id: 'mapNearby',

dockedItems: [{
xtype: 'toolbar',
title: 'Deals near you',
dock: 'top',
items: [{
xtype: 'button',
text: 'Home',
ui: 'Home',
handler: function(){
dealraiser.views.viewport.setActiveItem(dealraiser.views.dealraiserHome , 'slide');
}

}]
}],


store : dealraiser.stores.SDeals,
items: [{
xtype: 'map',
id: 'mapaNearby',

mapOptions : {
center : new google.maps.LatLng(35.489567, -80.856163),
//center : new google.maps.LatLng(lat, longt),
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners : {

delay: 1000,

'maprender' : function(comp, map){

var imageN = image;
var markersN = [];
var contentStrings = [];
infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)

});
for(var i=0;i<mapNearbyPositions.length;i++){

var markerN = new google.maps.Marker({
position: mapNearbyPositions[i],
map: this.map,
icon : imageN,
id : mapNearbyID[i],
zIndex: Math.round(mapNearbyPositions[i][0]*-100000)<<5,
html : '<Div ><Span class=/"ginfowbox/">'+mapNearbyText[i]+'</Span><a onClick = "showNearbyDeal('+mapNearbyID[i]+','+i+')"><img src="images/arrow.png"></a></Div>'
});
markersN.push(markerN);
//get deal idmarkers[i].html+;
var thisDealID = markersN[i].id;
//google API for message
google.maps.event.addListener(markerN, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(this.map, this);
});
}
}
}
}],


initComponent: function() {
dealraiser.views.DealraiserHome.superclass.initComponent.apply(this, arguments);
}
});

function showNearbyDeal(dealID, id){
//get deal object from store
dealNearbyInStore = id;
var oDealNearby= dealraiser.stores.SDealNearby.getAt(id);
dealraiser.views.dealDetail.updateWithRecord(oDealNearby);
var tpanel = dealraiser.views.dealDetail.getDockedItems();

//set Back button to search page
tpanel[0].items.item(0).setHandler( backNearbySearch);
dealraiser.views.viewport.setActiveItem(dealraiser.views.dealDetail , 'slide');
}


function backNearbySearch(){

dealraiser.views.viewport.setActiveItem(dealraiser.views.dealraiserMap , 'slide');
}

profunctional
9 Aug 2011, 4:10 AM
Try using panel.setLoading Which shows a loading mask.

jjerome
9 Aug 2011, 9:21 AM
I'm facing same issue when screens switches before the store loads.



dealraiser.views.DealraiserMap = Ext.extend(Ext.Panel,{

fullscreen : true,
layout: 'fit',
id: 'mapNearby',

dockedItems: [{
xtype: 'toolbar',
title: 'Deals near you',
dock: 'top',
items: [{
xtype: 'button',
text: 'Home',
ui: 'Home',
handler: function(){
dealraiser.views.viewport.setActiveItem(dealraiser.views.dealraiserHome , 'slide');
}

}]
}],


store : dealraiser.stores.SDeals,
items: [{
xtype: 'map',
id: 'mapaNearby',

mapOptions : {
center : new google.maps.LatLng(35.489567, -80.856163),
//center : new google.maps.LatLng(lat, longt),
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners : {

delay: 1000,

'maprender' : function(comp, map){

var imageN = image;
var markersN = [];
var contentStrings = [];
infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)

});
for(var i=0;i<mapNearbyPositions.length;i++){

var markerN = new google.maps.Marker({
position: mapNearbyPositions[i],
map: this.map,
icon : imageN,
id : mapNearbyID[i],
zIndex: Math.round(mapNearbyPositions[i][0]*-100000)<<5,
html : '<Div ><Span class=/"ginfowbox/">'+mapNearbyText[i]+'</Span><a onClick = "showNearbyDeal('+mapNearbyID[i]+','+i+')"><img src="images/arrow.png"></a></Div>'
});
markersN.push(markerN);
//get deal idmarkers[i].html+;
var thisDealID = markersN[i].id;
//google API for message
google.maps.event.addListener(markerN, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(this.map, this);
});
}
}
}
}],


initComponent: function() {
dealraiser.views.DealraiserHome.superclass.initComponent.apply(this, arguments);
}
});

function showNearbyDeal(dealID, id){
//get deal object from store
dealNearbyInStore = id;
var oDealNearby= dealraiser.stores.SDealNearby.getAt(id);
dealraiser.views.dealDetail.updateWithRecord(oDealNearby);
var tpanel = dealraiser.views.dealDetail.getDockedItems();

//set Back button to search page
tpanel[0].items.item(0).setHandler( backNearbySearch);
dealraiser.views.viewport.setActiveItem(dealraiser.views.dealDetail , 'slide');
}


function backNearbySearch(){

dealraiser.views.viewport.setActiveItem(dealraiser.views.dealraiserMap , 'slide');
}


Does your store have a listener for the 'load' event? If it does, dont show the panel until the Store has finished loading (i.e. when it fires the 'load' event)

kulshreshtha.s
11 Aug 2011, 11:06 PM
Thanks for the reply.
No I don't have listeners in my store....
Could you provide an example of how to stop switching to next screen by delaying the call at listener...


Thanks.

b0hne
13 Sep 2011, 4:48 AM
Hi,

the following worked for me.

1.) define a LoadMask:

loadingMask=new Ext.LoadMask(Ext.getBody(), {msg: "Loading..."});

2.) add load-listener to your store.

store = new Ext.data.Store({
listeners: {
load: function(){
loadingMask.show();
// call your function to do something here
}
}


});


3.) in the function you've called in the load-listener of your store, add
loadingMask.hide(); after the function has set a google maps marker or something.

I used it this way to show a loading-screen while my store gets updatet and it works fine for me.

I hope this helps!

Simon