1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default Graphic equalizer-type linked sliders

    Graphic equalizer-type linked sliders


    I've just been playing a bit...

    Drop the following code into examples/*

    It creates a Panel of linked vertical sliders like a graphic equalizer widget. The sliders have a gradually weakening effect on their neighbours as you drag (Unless you use CTRL/drag)

    SHIFT/drag locks them all together.

    Have fun:

    Code:
    <html>
    <head>
    <title>Graphic Equalizer Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="slider.css">
    <link rel="stylesheet" type="text/css" href="../examples.css">
    <script type="text/javascript">
    SliderGrouper = new function() {
    
        function onDragStart(s) {
            s.lastDragValue = s.getValue();
        }
    
        function onDrag(s, e) {
            var inc, s, idx, i, p, pinc;
            if (!e.ctrlKey && (inc = s.getValue() - s.lastDragValue)) {
                s.lastDragValue = s.getValue();
                idx = s.ownerCt.items.indexOf(s);
                for (i = 0; i < this.siblings.length; i++) {
                    if (p = Math.abs(idx - i)) {
                        pinc = e.shiftKey ? inc : inc / Math.pow(1.5, (p + 0.5)/1.5);
                        s = this.siblings[i];
                        s.setValue(s.getValue() + pinc);
                    }
                }
            }
        }
    
        this.init = function(host) {
            host.on({
                render: function(c) {
                    if (c.isXType('slider')) {
                        host = c.ownerCt;
                    }
                    host.siblings = host.findByType('slider');
                    for (var i = 0, s = this.siblings, l = s.length; i < l; i++) {
                        s[i].animate = s[i].decimalPrecision = false;
                        s[i].on({
                            dragstart: onDragStart,
                            drag: onDrag,
                            scope: host
                        });
                    }
                },
                single: true
            });
        };
    };
    
    Ext.onReady(function() {
        new Ext.Panel({
            title: 'Linked Sliders',
            renderTo: document.body,
            frame: true,
            height: 200,
            width: 310,
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            plugins: SliderGrouper,
            defaults: {
                margins: '0 0 0 10',
                xtype: 'slider',
                vertical: true
            },
            items: [
                {},
                {},
                {},
                {},
                {},
                {},
                {},
                {},
                {}
            ]
        });
    });
    </script>
    </head>
    <body/>
    </html>

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Do we need anything from slider.css?

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    The directory location looked suspicious, perhaps just link to the default one provided? Sorry, should test before opening my mouth.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    It actually highlights one of the problems of Ext.Slider. The native setValue just flatly rounds off all decimal precision. That's why I poke in an instance overide or normalizeValue which uses the provided Ext.round function.

    It only rounds if you specify a decimalPrecision config.

    I suppose this could default to zero.

  5. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    That's awesome Nige!

    May I suggest abstracting the plugin? Newbies may have trouble reading it.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    OK, it's a plugin class now.

  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    1
    Vote Rating
    0
    kayanat is on a distinguished road

      0  

    Default


    thank you friend for sharing this wonderful script with us. but I was just wondering can I make the slider bar vertically? I want to do little customization, can I do that?

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,544
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Yes. Easily. Just refactor it using your Ext skills and the API docs!

  9. #9
    Sencha User
    Join Date
    Jan 2008
    Posts
    194
    Vote Rating
    0
    Richie1985 is on a distinguished road

      0  

    Default


    is it possible to set fieldlabels vertical?