javascript - Put a slider on each record from a tree panel extjs 5.1 -


i have tree panel data, , want add slider rigthclick event, slider doesn't appear.

this code:

tree:

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

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

i'm using extjs 5.1

here working fiddle - https://fiddle.sencha.com/#fiddle/mpg

below changed code , comments highlight changes -

treepanel.on('itemcontextmenu', function(view, record, item, index, event, eopts) {     event.stopevent(); // should called before stop browser default  menu     if (record.data.leaf != false) {         slider = ext.create('ext.slider.single', {             hidelabel: true,             floating: true, // set floating true, check 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 blur listener hide slider on blur                 }             }         });         slider.showby(item, 'tl-tl', [event.getx() - view.getx(), 11]); // fix display slider right below selected item      } }, this); 

Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -