ExtJS 3 Slider: значение слайдера всегда возвращается к минимальному значению, когда свернутый контейнер снова расширяется - PullRequest
Новая
       5

ExtJS 3 Slider: значение слайдера всегда возвращается к минимальному значению, когда свернутый контейнер снова расширяется

0 голосов
/ 30 января 2012

Я определил две панели в окне просмотра: основная панель не плавающая, другая - плавающая панель с ползунком в нижней панели инструментов. Когда мышь щелкает по корпусу главной панели, она генерирует случайное значение, которое используется для установки нового значения ползунка; хорошо работает, когда плавающее окно не свернуто ..

проблема, с которой я столкнулся сейчас, заключается в том, что контейнер ползунка (плавающая панель) свернут, каждый раз, когда пользователь щелкает мышью на главной панели (чтобы установить значение ползунка), если пользователь раскрывает плавающее окно, вы увидите, что ползунок указатель возвращается в начало; Я предполагаю, что это неправильно, я хочу, чтобы значение ползунка также изменялось, даже когда его контейнер разрушается.

Мне интересно, пропустил ли я какие-либо конфиги в ползунке ..... хотелось бы, чтобы кто-нибудь посоветовал мне! Спасибо!

Я прилагаю скрипт копирования и запуска здесь: 

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

1 Ответ

0 голосов
/ 31 января 2012

Вы можете решить эту проблему, просто вызвав Ext.Slider.syncThumb метод внутри раскрывающего слушателя, прикрепленного к вашей плавающей панели.Вы можете проверить рабочий 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>
...