Sencha touch 浏览器返回按钮编程

本文参考：https://loutilities.wordpress.com/2013/05/09/a-better-way-to-implement-back-button-with-sencha-touch-navigationview/

感谢作者分享！

  • 需求场景

因为sencha touch是一个app一个页面的概念，所以当我们按下浏览器的返回按钮（或者是硬件返回按钮，如安卓手机的返回）时，程序自动就退出了当前程序。而我们可能想到的效果是，退到这个app的前一个页面。

  • 效果展示

  • 关键代码

在示例代码navigationview的基础上进行的修改，如需代码可参照示例。

  1 Ext.define('AddressBook.controller.Application', {
  2     extend: 'Ext.app.Controller',
  3 
  4     config: {
  5         refs: {
  6             main: 'mainview',
  7             editButton: '#editButton',
  8             contacts: 'contacts',
  9             showContact: 'contact-show',
 10             editContact: 'contact-edit',
 11             saveButton: '#saveButton'
 12         },
 13 
 14         control: {
 15             main: {
 16                 push: 'onMainPush',
 17                 pop: 'onMainPop',
 18                 back: 'onMainBack'
 19             },
 20             editButton: {
 21                 tap: 'onContactEdit'
 22             },
 23             contacts: {
 24                 itemtap: 'onContactSelect'
 25             },
 26             saveButton: {
 27                 tap: 'onContactSave'
 28             },
 29             editContact: {
 30                 change: 'onContactChange'
 31             }
 32         }
 33     },
 34     launch: function () {
 35         var that = this;
 36         window.addEventListener('popstate', function () {
 37             var mainview = that.getMain();
 38             console.log(mainview.getItemId());
 39             console.log(mainview.getActiveItem().getItemId());
 40             if (mainview && mainview.getItemId() === "ext-mainview-1"
 41                 && mainview.getActiveItem().getItemId() !== "ext-contacts-1") {
 42                 mainview.pop();
 43             }else{
 44                 Ext.Msg.confirm('提示','确认退出？',function(success){
 45                     if(success){
 46                         history.back();
 47                     }
 48                 })
 49             }
 50 
 51 
 52         }, false);
 53     },
 54 
 55     onMainPush: function(view, item) {
 56         var editButton = this.getEditButton();
 57 
 58         if (item.xtype == "contact-show") {
 59             this.getContacts().deselectAll();
 60 
 61             this.showEditButton();
 62         } else {
 63             this.hideEditButton();
 64         }
 65 
 66         history.pushState();
 67     },
 68 
 69     onMainPop: function(view, item) {
 70         if (item.xtype == "contact-edit") {
 71             this.showEditButton();
 72         } else {
 73             this.hideEditButton();
 74         }
 75     },
 76 
 77     onMainBack: function(view, eOpts){
 78         history.back();
 79         return false;
 80     },
 81 
 82     onContactSelect: function(list, index, node, record) {
 83         var editButton = this.getEditButton();
 84 
 85         if (!this.showContact) {
 86             this.showContact = Ext.create('AddressBook.view.contact.Show');
 87         }
 88 
 89         // Bind the record onto the show contact view
 90         this.showContact.setRecord(record);
 91 
 92         // Push the show contact view into the navigation view
 93         this.getMain().push(this.showContact);
 94     },
 95 
 96     onContactEdit: function() {
 97         if (!this.editContact) {
 98             this.editContact = Ext.create('AddressBook.view.contact.Edit');
 99         }
100 
101         // Bind the record onto the edit contact view
102         this.editContact.setRecord(this.getShowContact().getRecord());
103 
104         this.getMain().push(this.editContact);
105 
106         if (Ext.theme.name == "Blackberry") {
107             this.showSaveButton();
108         }
109     },
110 
111     onContactChange: function() {
112         this.showSaveButton();
113     },
114 
115     onContactSave: function() {
116         var record = this.getEditContact().saveRecord();
117 
118         this.getShowContact().updateRecord(record);
119 
120         this.getMain().pop();
121     },
122 
123     showEditButton: function() {
124         var editButton = this.getEditButton();
125 
126         if (!editButton.isHidden()) {
127             return;
128         }
129 
130         this.hideSaveButton();
131 
132         editButton.show();
133     },
134 
135     hideEditButton: function() {
136         var editButton = this.getEditButton();
137 
138         if (editButton.isHidden()) {
139             return;
140         }
141 
142         editButton.hide();
143     },
144 
145     showSaveButton: function() {
146         var saveButton = this.getSaveButton();
147 
148         if (!saveButton.isHidden()) {
149             return;
150         }
151 
152         saveButton.show();
153     },
154 
155     hideSaveButton: function() {
156         var saveButton = this.getSaveButton();
157 
158         if (saveButton.isHidden()) {
159             return;
160         }
161 
162         saveButton.hide();
163     }
164 });
Application.js

 

posted @ 2015-06-26 10:48  爱编程的文子  阅读(122)  评论(0)    收藏  举报