Sencha Touch：快速点击一个按钮会推动一次视图两次 [英] Sencha Touch: Clicking a button rapidly will push a view twice

问题描述

说我有一个按钮可以触发一个新视图。
我注意到，如果我点击它不止一次，足够快，它会推动相同的视图两次。

你可以使用他们的官方文档模拟这种行为在此页面上，他们有一个现场示例：
http ：//docs.sencha.com/touch/2-0/#！/ guide / navigation_view

明确的问题是，只是如何防止它？

解决方案

屏蔽成功防止双击问题。

在我的代码我正在使用掩码/取消隐藏导航容器的两个功能：

  / ** 
 *带滚动的掩码容器轮。通常需要将Ajax请求发送到服务器和应用程序等待响应
 *最佳做法是屏蔽当前导航器容器，以防止阻塞整个应用程序。方法警告是否没有容器
 *被定义。在某些情况下，可以使用参数
 * 
 * @param container 
 * @param {boolean} [suppressWarning] 
 * / 
 startLoading：function（container ，suppressWarning）{
 var loadingComponent = container; 
 
 if（！loadComponent）{
 //< debug> 
 if（！suppressWarning）{
 console.warn（'请定义导航器容器进行非阻塞操作，或定义suppressWarning参数）; 
} 
 //< / debug> 
 loadingComponent = Ext.Viewport; 
} 
 
 // var lastMaskedContainer = container; 
 this.lastMaskedContainer = container; 
 
 loadComponent.setMasked（{
 xtype：'loadmask'，
 message：'Loading ...'
}）; 
 
 / * 
 Ext.defer（function（）{
 lastMaskedContainer.setMasked（false）; 
}，Pipedrive.app.maskingTimeout * 1000）
 * / 
}，
 
 / ** 
 * 
 * @param {Ext.Container} container 
 * @param {boolean} [suppressWarning ] 
 * / 
 stopLoading：function（container，suppressWarning）{
 var loadingComponent = container; 
 
 if（！loadComponent）{
 //< debug> 
 if（！suppressWarning）{
 console.warn（'请定义导航器容器进行非阻塞操作，或定义suppressWarning参数）; 
} 
 //< / debug> 
 loadingComponent = Ext.Viewport; 
} 
 
 var alreadyMasked = loadingComponent.getMasked（）; 
 
 var lastMaskedContainer = this.lastMaskedContainer; 
 if（！alreadyMasked&！suppressWarning）{
 //< debug> 
 if（lastMaskedContainer！= container）{
 console.warn（'发现开始/停止加载不一致，请修改代码'
 +（container？'。Container：'+ container.getId ）：'Ext.Viewport'）
 +（lastMaskedContainer？'，last masked container：'+ lastMaskedContainer.getId（）：''）
）; 
} 
 //< / debug> 
 loadingComponent = Ext.Viewport; 
} 
 loadComponent.setMasked（false）; 
} 
  

比点击处理程序：

  onDealDetailsTap：function（ct）{
 console.log（'onDealDetailsTap'，ct）; 
 var form = ct.getReferenceForm（），
 navigatorContainer = this.getNavigatorContainer（form），
 model = form.getRecord（）; 
 
 UiHelper.startLoading（navigatorContainer）; 
 Ext.Viewport.fireEvent（'detailfields'，{
 title：model.get（'title'），
 id：model.get（'id'），
 store ：'DealFields'，
 navigatorContainer：navigatorContainer 
}）
}，
  

清理加载掩码：

  control：{
 activitiesContainer：{
 push：' onPushActivitiesContainer'
}，
 
 
 
 
 onPushActivitiesContainer：function（ct）{
 //console.log('onPushActivitiesContainer'，ct ）; 
 UiHelper.stopLoading（ct）; 
}，
  

特别是等待长时间的ajax请求很酷...

干杯，Oleg

Say I have a button that triggers a push of a new view. I noticed that if I click it more than once, fast enough, it will push the same view twice.

You can mimic this behavior using their official docs on this page, where they have a live sample: http://docs.sencha.com/touch/2-0/#!/guide/navigation_view

the clear question is, simply how to prevent it?

解决方案

Masking successfully prevents double tapping problem.

In my code I'm using two functions for mask/unmask navigation container:

/**
 * Mask container with rolling wheel. Usually need if Ajax-request is sent to the server and app waiting for response
 * Best practice is masking the current navigator container, to prevent blocking whole app. Method warns if no container
     * is defined. In some cases warning could be suppress with parameter
     *
     * @param container
     * @param {boolean} [suppressWarning]
     */
    startLoading: function(container, suppressWarning) {
        var loadingComponent = container;

        if (!loadingComponent) {
            // <debug>
            if (!suppressWarning) {
                console.warn('Please define navigator container for non-blocking operation, or define suppressWarning parameter');
            }
            // </debug>
            loadingComponent = Ext.Viewport;
        }

//      var lastMaskedContainer = container;
        this.lastMaskedContainer = container;

        loadingComponent.setMasked({
            xtype: 'loadmask',
            message: 'Loading...'
        });

/*
        Ext.defer(function() {
            lastMaskedContainer.setMasked(false);
        }, Pipedrive.app.maskingTimeout * 1000)
*/
    },

    /**
     *
     * @param {Ext.Container} container
     * @param {boolean} [suppressWarning]
     */
    stopLoading: function(container, suppressWarning) {
        var loadingComponent = container;

        if (!loadingComponent) {
            // <debug>
            if (!suppressWarning) {
                console.warn('Please define either navigator container for non-blocking operation, or define suppressWarning parameter');
            }
            // </debug>
            loadingComponent = Ext.Viewport;
        }

        var alreadyMasked = loadingComponent.getMasked();

        var lastMaskedContainer = this.lastMaskedContainer;
        if (!alreadyMasked && !suppressWarning) {
            // <debug>
            if (lastMaskedContainer != container) {
                console.warn('Found Start/Stop Loading inconsistency. Please revise code'
                    + (container ? '. Container: ' + container.getId() : 'Ext.Viewport')
                    + (lastMaskedContainer ? ', last masked container: ' + lastMaskedContainer.getId() : '')
                );
            }
            // </debug>
            loadingComponent = Ext.Viewport;
        }
        loadingComponent.setMasked(false);
    }

than in the tap handler:

onDealDetailsTap: function(ct) {
    console.log('onDealDetailsTap', ct);
    var form = ct.getReferenceForm(),
        navigatorContainer = this.getNavigatorContainer(form),
        model = form.getRecord();

    UiHelper.startLoading(navigatorContainer);
    Ext.Viewport.fireEvent('detailfields', {
        title: model.get('title'),
        id: model.get('id'),
        store: 'DealFields',
        navigatorContainer: navigatorContainer
    })
},

to cleanup the loading mask:

control : {
    activitiesContainer: {
        push: 'onPushActivitiesContainer'
    },




onPushActivitiesContainer: function(ct) {
    //console.log('onPushActivitiesContainer', ct);
    UiHelper.stopLoading(ct);
},

especially it is cool for waiting for long-timed ajax requests....

Cheers, Oleg

这篇关于Sencha Touch：快速点击一个按钮会推动一次视图两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！