Home/ Questions/Q 7186287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:36:00+00:00

I defined two panels in viewport: a main panel which is non-floating, the other

  • 0

I defined two panels in viewport: a main panel which is non-floating, the other one is a floating panel with a slider in its bottom toolbar. When mouse clicks at the body of the main panel, it generates a random value which is used to set the new value of the slider bar; it works well when the floating window is not collapsed..

the problem I have now is when the slider container (floating panel) is collapsed, each time after mouse clicks at the main panel (to set the slider’s value), if user expands the floating window, you will see that the slider pointer goes back to the beginning; I assume this is not right, I want slider’s value changed as well even when its container collapses.

I am wondering whether I missed any configs in the slider….. wish somebody can advise me! thanks!

I attach a copy&run script here:

    <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
</head>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'img/s.gif';

Ext.onReady(function() {
    Ext.QuickTips.init();   

    var mainPanel = new Ext.Panel({ //define a main non-floating panel
            title: 'main',
            id: 'mainPanel',
            width: 400,
            height: 400

        });

    //define viewport
    var viewPort = new Ext.Viewport({ 
        items: [
            mainPanel
        ]
    });

    mainPanel.body.on('click', function() {
        var tmpValue = parseInt(Math.random() * 90) + 10; //generate a random value, also make sure it's always larger than 0
        Ext.getCmp('testSlider').setValue(tmpValue); //set new value for the test slider
    });

    var floatWin = new Ext.Window({ //floating panel, the container of a slider bar
        id:'floatWin',
        title: 'Float Win',
        closable: false,
        width: 200,
        height: 200,
        layout: 'fit',
        floating : true,
        collapsible: true,
        bbar:[{
            xtype: 'slider', //test slider
            minValue: 0,
            maxValue: 100,
            id: 'testSlider',
            width: 80,
            increment: 1,
            stateful: true
        }]
    });

    floatWin.show();
}); 
</script>
<body>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can fix this issue by simply calling Ext.Slider.syncThumb method inside expand listener attached on your floating panel. You can check out working jsFiddle here based on your code.

    <!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
</head>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'img/s.gif';

Ext.onReady(function() {
    Ext.QuickTips.init();   

    var mainPanel = new Ext.Panel({ //define a main non-floating panel
            title: 'main',
            id: 'mainPanel',
            width: 400,
            height: 400

        });

    //define viewport
    var viewPort = new Ext.Viewport({ 
        items: [
            mainPanel
        ]
    });

    mainPanel.body.on('click', function() {
        var tmpValue = parseInt(Math.random() * 90) + 10; //generate a random value, also make sure it's always larger than 0
        Ext.getCmp('testSlider').setValue(tmpValue); //set new value for the test slider
    });

    var floatWin = new Ext.Window({ //floating panel, the container of a slider bar
        id:'floatWin',
        title: 'Float Win',
        closable: false,
        width: 200,
        height: 200,
        layout: 'fit',
        floating : true,
        collapsible: true,
        bbar:[{
            xtype: 'slider', //test slider
            minValue: 0,
            maxValue: 100,
            id: 'testSlider',
            width: 80,
            increment: 1,
            stateful: true
        }],
        listeners: {
            expand: function() {
                Ext.getCmp('testSlider').syncThumb();
            }
        }
    });

    floatWin.show();
}); 
</script>
<body>
</body>
</html>
    • 0