ExtJS 3 Slider：当折叠的容器再次展开时，滑块值总是回到最小值

发布于 2024-12-29 19:53:00 字数 2106 浏览 3 评论 0 原文

我在视口中定义了两个面板：一个是非浮动的主面板，另一个是浮动面板，其底部工具栏中有一个滑块。当鼠标点击主面板主体时，会生成一个随机值，用于设置滑块的新值；当浮动窗口未折叠时它工作得很好。

我现在遇到的问题是当滑块容器（浮动面板）折叠时，每次在主面板上单击鼠标（以设置滑块的值）后，如果用户展开浮动窗口，你会看到滑块指针回到了开头；我认为这是不对的，我希望滑块的值也能改变，即使它的容器折叠了。

我想知道我是否错过了滑块中的任何配置......希望有人可以建议我！谢谢！

我在此处附上复制并运行脚本：

    <!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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉城已无爱 2025-01-05 19:53:00

您只需调用工作 jsFiddle 。

<!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>

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 原文

~没有更多了~