在推送视图上隐藏按钮，并在返回列表视图时显示它 [英] Hiding a button on pushed view and showing it when back to list view

问题描述

当我加载列表视图时，它有几个博客帖子和左上角的刷新按钮。

When I load my list view it has several blog posts and a refresh button on the top left.

如果我点击列表项，视图被推送该具体职位的内容。当这个视图被推入时，刷新按钮被隐藏。

If I tap on a list item a view is pushed with the contents of that specific post. When this view is pushed in, the refresh button is hidden.

但是当我点击返回到父列表视图时，我想要刷新按钮显示（不隐藏） - 但它仍然隐藏。

But when I tap 'Back' to the parent list view, I'd like the refresh button to show (un-hide) - but it remains hidden.

任何想法如何使这项工作？

Any idea how to make this work?

是我的观点：

Ext.require(['Ext.data.Store', 'MyApp.model.StreamModel'], function() {
    Ext.define('MyApp.view.HomeView', {
        extend: 'Ext.navigation.View',
        xtype:  'homepanel',

        requires: [
            'Ext.dataview.List',
        ],

        config: {
            title:            'Home',
            iconCls:          'home',
            styleHtmlContent: true,
            navigationBar: {
                items: [
                    {
                        xtype:    'button',
                        iconMask: true,
                        iconCls:  'refresh',
                        align:    'left',
                        action:   'refreshButton',
                        id:       'refreshButtonId'
                    }
                ]
            },
            items: {
                title: 'My',
                xtype: 'list',
                itemTpl: [
                    '<div class="post">',
                        ...
                    '</div>'

                ].join(''),

                store: new Ext.data.Store({
                    model: 'MyApp.model.StreamModel',
                    autoLoad: true,
                    storeId: 'stream'
                }),
            }
        }
    });
});

和我的控制器：

Ext.define('MyApp.controller.SingleController', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            stream: 'homepanel'
        },
        control: {
            'homepanel list': {
                itemtap: 'showPost'
            }
        }
    },

    showPost: function(list, index, element, record) {

        this.getStream().push({
            xtype: 'panel',
            html: [
                '<div class="post">',
                '</div>'

            ].join(''),
            scrollable: 'vertical',
            styleHtmlContent: true,
        });

        Ext.getCmp('refreshButtonId').hide();
    }
});

推荐答案

我不知道这是否是最好的方法或者不是，如果我是你，我将使用

I'm not sure whether this is the best approach or not but if I were you I will use the back event of navigation view which fired when you tap the back button

所以在 showPost 返回事件 >函数，你应该为这样的后台事件添加另一个控件：

So beside showPost function, you should add another control for back event like this:

'homepanel list': {
    itemtap: 'showPost'
},
stream: {
    back: 'backButtonHandler'
}

然后，您可以运行 backButtonHandler 函数再次显示刷新按钮：

Then you can run the backButtonHandler function to show your refresh button again:

backButtonHandler: function(button){
     Ext.getCmp('refreshButtonId').show();
}

希望它有帮助：）

这篇关于在推送视图上隐藏按钮，并在返回列表视图时显示它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！