javascript - हमेशा एक्स्टजे में स्लाइडर के टिप टेक्स्ट को दिखाएं




extjs extjs4 extjs4.1 extjs-mvc (3)

extjs 4.2 के लिए,
परिवर्तन :
slider.removeListener('dragend', me.hide);
सेवा मेरे :
slider.removeListener('dragend', me.hide, me);

एक्स्टजेस 4.1.1 ए में स्लाइडर के tip text को हमेशा कैसे दिखाना है?

वर्तमान में, tip text तब दिखाई दे रहा है जब उपयोगकर्ता स्लाइडर के बार को छोड़ देता है।
मैंने दस्तावेज़ पर खोज की लेकिन किसी भी संबंधित अवधारणाओं को नहीं मिला।

अगर यह दस्तावेज़ीकृत नहीं है या संभव नहीं है , तो कृपया मुझे बताएं कि tip text मैन्युअल रूप से कैसे बनाया जाए। tip text स्लाइडर के पट्टी के साथ आगे बढ़ना चाहिए और इसे किसी भी अन्य आसन्न घटकों पर काबू पाने या छिपाना नहीं चाहिए।

यहां मेरा कोड है जो एक साधारण स्लाइडर उत्पन्न करता है:

xtype:'slider',
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 6,
minValue: 1,
maxValue: 12,
useTips: true,

tipText: function(thumb){
    var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var value = Ext.String.format(months[thumb.value]);
    return value;
},

प्रश्न 2: क्या स्लाइडर पर tip text दिखाना संभव है?

पुनश्च: मैंने यहां एक ही सवाल पूछा।

1 संपादित करें: मैं भी दो आसन्न बटन ( < और > ) के साथ स्लाइडर के तलाशने बार को स्थानांतरित कर रहा हूं। तो ध्यान रखना चाहिए कि अगर मैं आसन्न बटनों के साथ तलाश वाली बार को स्थानांतरित करता हूं तो tip text को भी स्थानांतरित करना चाहिए।

2 संपादित करें: स्लाइडर या आसन्न बटनों पर टिप किए जाने पर टिप टेक्स्ट दिखाई देना चाहिए।

उत्तर : http://jsfiddle.net/WdjZn/1/


मैंने Ext.slider.Tip में कुछ ईवेंट हैंडलर्स को ओवरराइड करके टिप को दिखाई देने में कामयाब रहा है:

Ext.define('AlwaysVisibleTip', {
    extend: 'Ext.slider.Tip',

    init: function(slider) {
        var me = this;
        me.callParent(arguments);
        slider.removeListener('dragend', me.hide);
        slider.on({
            scope: me,
            change: me.onSlide,
            afterrender: function() {
                setTimeout(function() {
                    me.onSlide(slider, null, slider.thumbs[0]);
                }, 100);
            }
        });
    }
});

Ext.create('Ext.slider.Single', {
    animate: false,
    plugins: [Ext.create('AlwaysVisibleTip')],
    // ...
});

डेमो देखें

मेरे दृष्टिकोण की कमियां:

  1. यह onSlide पर निजी विधि पर निर्भर करता है
  2. यह केवल एकल स्लाइडर पर लागू होता है
  3. कुंजीपटल नेविगेशन ठीक से ही काम करता है, अगर animate को false सेट किया गया हो
  4. setTimeout का उपयोग टिप की प्रारंभिक स्थिति को समायोजित करने के लिए किया जाता है

इस कमियां तय करने के लिए न केवल Ext.slider.Tip क्लास लेकिन Ext.slider.Multy वर्ग और संभवतः Ext.slider.Thumb वर्ग हैकिंग की आवश्यकता होगी।

संपादित करें

changecomplete ईवेंट के साथ change ईवेंट के रूप में change दिया जाता है क्योंकि changecomplete slider.setValue() को कॉल किया जाता है।

आसन्न बटन के साथ स्लाइडर के जोड़ा गया डेमो

EDIT2

tipText विन्यास तब लागू नहीं है जब कस्टम टिप प्लगइन उपयोग किया जाता है। आपको प्लगइन के getText कॉन्फ़िग का उपयोग करना होगा:

Ext.create('Ext.slider.Single', {
    animate: false,
    plugins: [Ext.create('AlwaysVisibleTip',{
        getText: function(thumb) {
            var months = ['','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            return Ext.String.format(months[thumb.value]);
        }
    })],
    // ...
});

डेमो अपडेट किया गया


आप सरणी को फेरबदल कर सकते हैं और पहले चार को चुन सकते हैं।

numbers.sort( function() { return 0.5 - Math.random() } );

अब numbers[0] , numbers[1] ... और इसी तरह यादृच्छिक और अद्वितीय तत्व हैं।

ध्यान दें कि यह विधि किसी सरणी में फेरबदल करने का एक इष्टतम तरीका नहीं हो सकता है: देखें कि क्या फेरबदल के लिए जावास्क्रिप्ट Array.sort () विधि का उपयोग करना सही है? चर्चा के लिए।





javascript extjs extjs4 extjs4.1 extjs-mvc