4 ways to safely push and pop navigation in Sencha Touch

Hey guys,

As you know, Sencha Touch is one of the top cross-platform mobile app development tools available today. In this post, we’re going to look at the various methods via which you can safely push and pop views in Sencha. Alternatively, you can also use the ‘redirect’ function with the URLs of different views, to achieve the same effect.

Typically, developers have a navigational view ‘MainView’ onto which they push/pop other views (shown below)


//A navigational View added to viewport
var MainView = Ext.create('SampleApp.view.Main');
Ext.Viewport.add(MainView);

//to push a view
var firstView = Ext.create(‘SampleApp.view.First’’);
MainView.push(firstView);

//to pop a view in order of stack
MainView.pop();

This push/pop of views is mostly done on a button click in the event handler function. While it seems to work fine in the browser, it can respond irregularly on a device. Since web apps are not as responsive as native mobile apps, it takes a bit longer to push and load a new view in web apps. This means if a user taps two buttons simultaneously or double taps a single button, the event handler function would fire twice. Below are the methods you can use to safely push /pop views.

• Using the TimeStamp property (Recommended):

By introducing click delays, you can avoid double taps. You can save the previous tap’s TimeStamp in the global variables and use it with the current TimeStamp. Doing so will also prevent multiple button touches on the same screen. This is the method I would recommend. Here’s the code you can use for this purpose.


var now = Date.now();
//Restrict multiple taps
if (now < previousTapTimestamp + clickDelay) { previousTapTimestamp = now; return; } previousTapTimestamp = now;

• Using the Ext.Viewport property:

You already know that once a view is pushed, you don’t need to push it again. So you can find out which views have already been pushed into MainView, by using the following code.


//For pushing a view
if(MainView.getActiveItem().xtype != ‘someView’){
MainView.push({ xtype: "someView" });
}

//To pop a view
if(MainView.getActiveItem().xtype == ‘someView’){
MainView.pop();
}

• By setting a Mask:

A mask can help you block the entire screen until the view has been loaded/painted. You can then unmask the screen to display the view.


//To set mask
Ext.Viewport.setMasked({xtype:'loadmask',message:'loading view'});

//To Unmask after the view has loaded
Ext.Viewport.setMasked(false);

• By suspending the button click event:

Finally, we can suspend all events associated with the button click event and resume it only after the view has loaded.


//To suspend button events
MainView.push({ xtype: "someView" });
button.suspendEvents();

//To resume later
button.resumeEvents();
Explore our blog

ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services.

Blog Post