Javascript 在树面板extjs 5.1中的每条记录上放置一个滑块

我有一个包含数据的树面板，我想添加一个带有rigthclick by a event的滑块，但滑块没有显示

代码如下：

树：

活动：

tree.on('itemcontextmenu', function(view, record, item, index, event){

        if(record.data.leaf != false){
            Ext.create('Ext.slider.Single', {
                id: 'sliderTable',
                renderTo: document.body,
                hideLabel: true,
                width: 214,
                minValue: 0,
                maxValue: 100
            });
        }
        event.stopEvent();
    },this);

---

我使用的是ExtJs 5.1

这里有一把供您使用的小提琴-

以下是更改的代码和注释，以突出显示更改-

treepanel.on('itemcontextmenu', function(view, record, item, index, event, eOpts) {
    event.stopEvent(); // this should be called before to stop browser default  menu
    if (record.data.leaf != false) {
        slider = Ext.create('Ext.slider.Single', {
            hideLabel: true,
            floating: true, // set floating to true, check this for reason: [http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.slider.Single-cfg-floating][1]
            width: 214,
            minValue: 0,
            maxValue: 100,
            listeners: {
                blur: function() {
                    slider.hide(); // Added a blur listener to hide slider on blur
                }
            }
        });
        slider.showBy(item, 'tl-tl', [event.getX() - view.getX(), 11]); // fix to display the slider right below the selected item

    }
}, this);

---

感谢您的支持。有什么方法可以捕捉滑块的移动事件吗？

treepanel.on('itemcontextmenu', function(view, record, item, index, event, eOpts) {
    event.stopEvent(); // this should be called before to stop browser default  menu
    if (record.data.leaf != false) {
        slider = Ext.create('Ext.slider.Single', {
            hideLabel: true,
            floating: true, // set floating to true, check this for reason: [http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.slider.Single-cfg-floating][1]
            width: 214,
            minValue: 0,
            maxValue: 100,
            listeners: {
                blur: function() {
                    slider.hide(); // Added a blur listener to hide slider on blur
                }
            }
        });
        slider.showBy(item, 'tl-tl', [event.getX() - view.getX(), 11]); // fix to display the slider right below the selected item

    }
}, this);