extjs - सेनेचा टच: एक बटन को तेजी से क्लिक करने से एक दृश्य दो बार धक्का होगा




sencha-touch sencha-touch-2 (7)

बस बटन पर होने वाले ईवेंट को स्थगित करें, जब इसे धक्का दिया जाता है, तब टैप किया जाता है और फिर से शुरू होता है

button.suspendEvents();
...
button.resumeEvents();

मुझे नहीं लगता कि एक और तरीका है। एक डेवलपर या उपयोगकर्ता के रूप में, जब आप दो बार एक बटन टैप करते हैं, तो आप उम्मीद करते हैं कि ईवेंट हैंडलर को दो बार कहा जाए

उम्मीद है की यह मदद करेगा

कहें कि मेरे पास एक बटन है जो एक नया दृश्य के पुश को ट्रिगर करता है। मैंने देखा कि अगर मैं इसे एक से अधिक बार क्लिक करता हूं, तेज़ पर्याप्त, यह एक ही दृश्य को दो बार दबाएगा।

आप इस पृष्ठ पर अपने आधिकारिक दस्तावेज़ों का उपयोग करके इस व्यवहार की नकल कर सकते हैं, जहां उनका लाइव नमूना है: http://docs.sencha.com/touch/2-0/#!/guide/navigation_view

स्पष्ट सवाल यह है कि इसे रोकने के लिए कैसे?


मास्किंग सफलतापूर्वक डबल टैपिंग समस्या को रोकता है।

मेरे कोड में मैं मुखौटा / नेपमी नकाब कंटेनर के लिए दो फ़ंक्शन का उपयोग कर रहा हूं:

/**
 * 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);
    }

नल हैंडलर की तुलना में:

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);
},

विशेष रूप से लंबे समय से अजाक्स अनुरोधों की प्रतीक्षा करने के लिए यह अच्छा है ....

चीयर्स, ओलेग


एक और तरीका यह है कि सक्रिय दृश्य क्या है, और केवल तभी धक्का करें यदि वह ऐसा दृश्य न हो जैसा आप पुश करने वाले हैं मैंने यह परीक्षण किया है और यह काम करता है

उदाहरण के लिए

if (this.getNavigationView().getActiveItem().xtype != "someView") {
    this.getNavigationView().push({ xtype: "someView" });
}

जेटीजी के जवाब को बढ़ाते हुए, मैंने एक कस्टम नेविगेशन दृश्य में पुश पद्धति को ओवरराइड किया है, इस तरह:

Ext.define('BT.navigation.View', {
   extend: 'Ext.navigation.View',
   xtype: 'btnavigationview',

   push: function (view) {
      if(this.getActiveItem().xtype != view.xtype)
         this.callParent(arguments);
      else
         console.warn("Prevented pushing a potentially duplicate view of xtype: " + view.xtype);
   }
});

मुझे पूरी तरह से आश्वस्त नहीं है अगर xtype धारणा पर्याप्त सुरक्षित है, लेकिन मैं अपने वर्तमान ऐप में किसी भी स्थिति का विचार नहीं कर सकता, जिसके लिए नेविगेशन स्टैक पर एक ही प्रकार के दूसरे दृश्य को एक दृश्य की आवश्यकता होगी। तो, समाधान मेरे लिए काम करता है, और यह बहुत साफ है। चेतावनी यह है कि बाद में मुझे सिरदर्द को बचाने के लिए और संभवतः मेरे बालों को बाहर खींचने के लिए बाहर खींचने का प्रयास करने की कोशिश क्यों नहीं कर पा रहे हैं!


मैंने यह जाँचने के लिए एक विधि बनाई है:

    ENSURE_NO_DOUBLE_TAP : function(classNameToPush) {
        if (Ext.getClassName(Ext.getCmp('MyViewport').getActiveItem()) == classNameToPush) {
            return false;
        }

        return true;
    }

तब दोबारा टेप किया जा सकता है, जो कुछ भी पहले अपने ऐप से संसाधित किया जाता है:

        if (!ENSURE_NO_DOUBLE_TAP('MyApp.view.View')) {
            return;
        }

यदि आप श्रोताओं का उपयोग कर एक बटन के नल ईवेंट को सुन रहे हैं, तो यहां मेरा समाधान है:

listeners : {   
     release : function(){                                  
          if(this.getDisabled())return false;
          this.setDisabled(true);
          this.fireEvent('tap');
     },
     tap : function() {
         //do what you want
     }
 }

आप "आइटमिंगलेटैप" ईवेंट का उपयोग कर सकते हैं

यदि आप डबल नल का समर्थन भी करना चाहते हैं, तो "मद डिस्प्लेप" के लिए एक दूसरा श्रोता बनायें और एक ही फ़ंक्शन का आह्वान करें, दोनों श्रोताओं के साथ ठीक काम करते हैं।