कैरोसेल

Question

में खींचने को अक्षम करें क्या कैरोसेल पैनलों के बीच स्वैप करने के लिए ड्रैगिंग के उपयोग को अक्षम करना संभव है? मैं सिर्फ संकेतक का उपयोग करना चाहता हूं।

Answer 1

कोशिश ओवरराइड Carousel में विधि afterRender;

afterRender : function() { 
     Ext.Carousel.superclass.afterRender.call(this); 
     this.mon(this.body, { 
     direction : this.direction, 
     scope : this 
     }); 
     this.el.addCls(this.baseCls + "-" + this.direction) 
    } 

पूरे कोड (मैं बच्चे की पद्धति पर खींचें घटनाओं हटाया);

this.car = new Ext.Carousel({ 
       ui  : 'light', 
       items: [ 
       { 
         html: '<p>Carousels can be vertical and given a ui of "light" or "dark".</p>', 
         cls : 'card card1' 
        }, 
        { 
         html: 'Card #2', 
         cls : 'card card2' 
        }, 
        { 
         html: 'Card #3', 
         cls : 'card card3' 
        }], 
         afterRender : function() { 
          Ext.Carousel.superclass.afterRender.call(this); 
          this.mon(this.body, { 
           direction : this.direction, 
           scope : this 
          }); 
          this.el.addCls(this.baseCls + "-" + this.direction) 
         } 
     }); 

Answer 2

बस इसे सेन्चा टच 2.0 लोगों के लिए बाहर फेंक रहा है। उपरोक्त समाधान सेन्चा टच 2.0 के लिए काम नहीं करता है, लेकिन आसपास एक बहुत ही आसान काम है।

Ext.define('Ext.LockableCarousel', { 
    extend: 'Ext.Carousel', 
    id: 'WelcomeCarousel', 
    initialize: function() { 
     this.onDragOrig = this.onDrag; 
     this.onDrag = function (e) { if(!this.locked){this.onDragOrig(e);} } 
    }, 
    locked: false, 
    lock: function() { this.locked = true; }, 
    unlock: function() { this.locked = false; } 
}); 

यह वास्तव में एक हिंडोला की तरह कार्य करेगा, को छोड़कर अब आप .lock फोन और उस पर .unlock कर सकते हैं। तो आप कुछ ऐसा कर सकते हैं:

Ext.Viewport.add(Ext.create('Ext.LockableCarousel', { 
    id: 'LockableCarousel', 
    fullscreen: true, 
    hidden: false, 
    items: [ 
     { 
      html : 'Item 1', 
      style: 'background-color: #5E99CC' 
     }, 
     { 
      html : '<a href="#" onclick="Ext.getCmp(\'LockableCarousel\').lock();">Lock</a><br /><a href="#" onclick="Ext.getCmp(\'LockableCarousel\').unlock();">Unlock</a>', 
      style: 'background-color: #759E60' 
     } 
    ] 
}));