Question

我有一个包含数据的树状面板，我希望通过事件添加一个带有rigthclick的滑块，但滑块不会出现。

这是代码：

树：

var tree = Ext.create('Ext.tree.Panel', {
        title: '',
        width: 500,
        height: 400,
        //renderTo: Ext.getBody(),
        reserveScrollbar: true,
        loadMask: true,
        useArrows: true,
        rootVisible: false,
        store: treeStore,
        allowDeselect : true,
        border : true,
        animate: true,
        listeners: {
            checkchange: function(node, checked, eOpts) {
                console.log('selected node:', node, checked, eOpts);
            },
            select: function( record, index, eOpts ){
                console.log('Selected element:', record, index, eOpts);
            },
            beforedeselect: function( record, index, eOpts ){
                console.log("", record);
            }
        });

事件：

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

Answer 1

这是一个适合你的小提琴 - https://fiddle.sencha.com/#fiddle/mpg

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

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);

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

1 个答案: