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
Post a Comment