2015-05-13 2 views
0

У меня есть панель дерева с данными, и я хочу добавить слайдер с флагом на событие, но слайдер не появляется.Поместите слайдер на каждую запись с панели дерева extjs 5.1

Это код:

Дерево:

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

ответ

0

Вот рабочая скрипку для вас - 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); 
+0

Спасибо за вашу поддержку. – davids182009

+0

Есть ли способ поймать событие перемещения слайдера? – davids182009

+0

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.slider.Single-event-drag – Yellen

Смежные вопросы