Question

我已经使用sencha触摸历史记录和路由在我的应用中实现了后退按钮支持。但它只有在应用程序通过浏览器运行时才有效。当我将应用程序打包为本机应用程序时，按下后退按钮就会关闭应用程序。如何在本机android打包应用程序中处理设备后退按钮？除了sencha触摸路由和历史支持之外还有我需要的其他实现，以便在通过浏览器以及通过打包的Android应用程序运行时，后退按钮的工作原理相同吗？

我的控制器：

Ext.define('oscommercecatalog.controller.Category', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            main: 'main'
        },

        before: {
            showRootCategory: 'ensureStoreLoad',
            showCategoryById: 'ensureStoreLoad'
        },

        control: {
            main: {
                beforepop: 'onMainBeforePop'
            },
            categories: {
                itemtap: 'onCategoryTap'
            },
            productslist: {
                itemtap: 'onProductTap'
            }
        },

        routes: {
            '': 'showRootCategory',
            ':id': 'showCategoryById'
        },

        currentRecord: null,

        stack: []
    },

    init: function() {
        Ext.getStore('Categories').on('load', this.onStoreLoad, this);
    },

    ensureStoreLoad: function(action) {
        var store = Ext.getStore('Categories');

        if (store.data.all.length) {
            action.resume();
        } else {
            store.on('load', function() {
                action.resume();
            }, this, {
                single: true
            });
        }
    },

    onMainBeforePop: function() {
        var history = this.getApplication().getHistory(),
            record = this.getCurrentRecord().parentNode,
            urlId = (record && record.get('urlId')) ? record.get('urlId') : '',
            productView = this.productView,
            stack = this.getStack();

        this.setCurrentRecord(record);

        history.add(new Ext.app.Action({
            url: urlId
        }), true);

        stack.pop();
        this.setStack(stack);

        if (productView && !productView.isHidden()) {
            productView.hide();
        }
    },

    showRootCategory: function() {
        var stack = this.getStack();

        if (stack.length) {
            this.getMain().pop();
            return;
        }

        this.setStack([]);

        var store = Ext.getStore('Categories'),
            record = store.getRoot();

        this.addPreviousViews(record);
        this.showCategory(record);
    },

    onCategoryTap: function(view, index, target, record, e) {
        console.log('Category');
        this.redirectTo(record);
    },

    showCategoryById: function(id) {
        var store = Ext.getStore('Categories'),
            stack = this.getStack(),
            previousStackItem = stack[stack.length - 2],
            records, record;

        if (previousStackItem && previousStackItem == id) {
            this.getMain().pop();
            return;
        }

        records = Ext.Array.filter(store.data.all, function(record) {
            if (record.get('urlId') == id) {
                return record;
            }
        }, this);

        record = records[0];
        if (record) {
            this.addPreviousViews(record);

            stack.push(id);
            this.setStack(stack);

            if (record.childNodes.length) {
                this.showCategory(record);
            } else {
                this.showProducts(record);
            }
        } else {
            Ext.Logger.warn('Category not found');
        }
    },

    addPreviousViews: function(record) {
        var parents = [],
            main = this.getMain(),
            layout = main.getLayout(),
            animation = layout.getAnimation(),
            stack = this.getStack(),
            ln, i, urlId;

        if (main.getInnerItems().length) {
            return;
        }

        while ((record = record.parentNode)) {
            parents.unshift(record);
        }

        layout.setAnimation(false);

        ln = parents.length;
        for (i = 0; i < ln; i++) {
            urlId = parents[i].get('urlId');
            if (urlId) {
                stack.push(urlId);
            }

            this.showCategory(parents[i]);
        }

        this.setStack(stack);

        setTimeout(function() {
            layout.setAnimation(animation);
        }, 50);
    },

    showCategory: function(record) {
        var isRoot = (record.get('id') == "root"),
            view;

        if (isRoot) {
            record.set('label', 'Categories');
        }

        this.setCurrentRecord(record);

        view = this.getCategoriesView({
            title: record.get('label'),
            cls: (isRoot) ? 'root' : null,
            data: record.childNodes
        });

        this.getMain().setActiveItem(view);
    },

    showProducts: function(record) {
        this.setCurrentRecord(record);

        var store = record.products();
        store.getProxy().setExtraParam('cat', record.get('urlId'));
        store.load();

        //empty the store before adding the new one
        var productsStore = this.productsView.getStore();
        if (productsStore) {
            productsStore.removeAll();
        }

        this.productsView.setStore(store);

        this.getMain().setActiveItem(this.productsView);
    },

    /**
     * Called when an item is tapped on.
     * This is overridden in the Tablet controller
     */
    onProductTap: function(view, record) {
        var productView = this.getProductView();

        productView.setData(record.data);

        if (!productView.getParent()) {
            Ext.Viewport.add(productView);
        }

        productView.show();
    },

    /**
     * This creates and returns a new categories view, for when it is needed.
     * Ideally this should be improved at some point to only instansiate a max of 2 views
     * and then reuse the same views over again.
     * @param {Object} config The configuration for the view.
     * @return {Catalog.view.Categories} view
     */
    getCategoriesView: function(config) {
        return Ext.create('oscommercecatalog.view.Categories', config);
    },

    /**
     * This function is used to create and return a product view.
     * There is a different products view for both phone and tablet profiles, so we just have an emptyFn
     * in this base controller, and in the tablet/phone controller we will override this.
     * @param {Object} config The configuration for the view.
     * @return {Ext.Component} view
     */
    getProductsView: Ext.emptyFn,

    /**
     * This function is used to create and return a the product view.
     * There is a different product view for both phone and tablet profiles, so we just have an emptyFn
     * in this base controller, and in the tablet/phone controller we will override this.
     * @param {Object} config The configuration for the view.
     * @return {Ext.Component} view
     */
    getProductView: Ext.emptyFn
});

Answer 1

你可以像这样处理硬件后退按钮：

if (Ext.os.is('Android')) {
    document.addEventListener("backbutton", Ext.bind(onBackKeyDown, this), false);

    function onBackKeyDown(eve) {   
        eve.preventDefault();

        //do something
        alert('back button pressed');

    }
}

Answer 2

你可以通过以下步骤处理android后退按钮：

使用phonegap \ cordova
注册后退按钮事件
document.addEventListener（“backbutton”， deviceBackButtonHandler ，false）;
检查您是在第一页还是在应用的一侧，如果第一页然后退出您的应用，则导航到上一页

<强> deviceBackButtonHandler （应用程序，|上一页）{
   如果（|上一页！= NULL）{
   Ext.Viewport.animateAtiveItem（|上一页，                 {type：'slide'，direction：'left'}）;
     }其他{        app.exit（）;
     }
}

Answer 3

如果你还没找到办法，还在寻找。让我指出正确的方向。访问此博客：https://loutilities.wordpress.com/2013/05/09/a-better-way-to-implement-back-button-with-sencha-touch-navigationview/

他解释了如何在使用NavigationView时使用后退按钮实现侦听器。我希望这可以帮助别人。欢呼声。

Answer 4

对于Android打包的应用程序，你可以这样做，

您可以使用：for API level 5

来处理此问题

@Override
public void onBackPressed() {
    // your code.
}

对于旧版本，然后API 5使用此：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        // your code
    }

    return super.onKeyDown(keyCode, event);
}

Android设备后退按钮在sencha touch app中工作

4 个答案: