» Fig Leaf Software Home

We've Got You Covered.

Monday, June 23, 2014

Using Routes with Sencha Touch Navigation Views

Note: This post pertains to Sencha Touch 2.3.1
Using routes in Sencha Touch enables you to support the Android “back” button as well as allow for “deep linking” to a deeply nested view.
The only problem with using routes is that there’s not a lot of documentation or simple examples that describe integrating them with a Sencha Touch Navigation View, which is often used as the primary mechanism for navigating within small mobile phone apps.
Supporting routes is a three-step process:
1) Override the Ext.History class
It’s not just your imagination – it does appear as though the cards were stacked against you from the beginning. There’s actually a bit of a bug in the Ext.History class that prevents the history from dequeuing properly. To fix it, drop in this override:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ext.define('MyApp.overrides.History', {
    override: 'Ext.app.History',
 
    back: function() {
 
        var actions = this.getActions(),
            previousAction = actions[actions.length - 2];
 
        if (previousAction) {
             
            actions.pop(); // pop current view
 
            // Added by Steve Drucker
            // need to pop previous view, because it will get reinstantiated on next line
            actions.pop();
 
            previousAction.getController().getApplication().redirectTo(previousAction.getUrl());
        }
        else {
            actions[actions.length - 1].getController().getApplication().redirectTo('');
        }
    }
});
2) Override the Default Navigation View Back Button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',
 
    requires: [
        'Ext.app.Route'
    ],
 
    config: {
        routes: {
            '#login': 'onLogin',
            '#forgotpassword': 'onForgotPassword',
            '': 'onHome',
            '#notificationList': 'onNotificationList'
        },
 
        refs: {
            main: 'main',
            appBackButton: 'main button[ui=back]' // target acquired
        },
 
        control: {
            "main": {
                show: 'onNavigationviewShow'
            },
            "appBackButton": {
                tap: function(button, e) {
                  var appHistory = this.getApplication().getHistory();
 
                  // fire previous route
                  appHistory.back();
 
                  // prevent the default navigation view
                  // back button behavior from firing
                  return false;
 
                }
            }
        }
    }
});
3) Pop Back to Previous Views in your Route Handlers
Since you disabled the default “pop” action in step 2, you’ll need to deal with this in your route handlers by following the pattern illustrated in the following snippet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onNotificationSelect: function(id) {
  
 var record = Ext.getStore('Notifications').getById(id);
  
 // if view does not exist, instantiate it
 if (Ext.ComponentQuery.query('notificationdetail').length == 0) {
 
    this.getMain().push({
        xtype: 'notificationdetail',
        title: record.get('headline'),
        record: record
    });
 
 } else {
 
    // we're popping back to the view
    // from a "back" button push
    this.getMain().pop('notificationdetail');
 }
}
Happy coding!
Written by: Steve Drucker
[Cross-promoted: Druck-I.T.]

No comments:

Post a Comment

About Us

Fig Leaf Software is an award-winning team of imaginative designers, innovative developers, experienced instructors, and insightful strategists.

For over 20 years, we’ve helped a diverse range of clients...

Read More

Contact Us

202-797-7711

Fig Leaf Software

1400 16th Street NW
Suite 450
Washington, DC 20036

info@figleaf.com