javascript - ExtJS Find the id of an element -

i have app mvc model, in view create slider listeners, want listeners in controller class, , want id of element, generated variable tree panel....

this code

ext.require('ext.slider.*');  ext.define('app.view.viewtablacontenido', { extend: 'ext.window.window', id: 'viewtablacontenido', shadow: false,  alias: 'widget.tablacontenido',    initcomponent: function() {      var anchopanatallares = window.screen.width;     var altopantallares = window.screen.height;      var anchotoc = 330;     var altotoc = 473;      if (anchopanatallares <= 1024) {         anchotoc = 282;         altotoc = 373;     }      function addurl(value, p, record) {         return value ? ext.string.format(                 '<a href="'+value+'"target="_blank"'+'>ver metadato'+'</a>'         ):'';     }      var treestore = ext.getstore('capa');      var tree = ext.create('ext.tree.panel', {         title: '',         id: "arboltabla",          width: anchotoc,         height: altotoc,                     reservescrollbar: true,         loadmask: true,         usearrows: true,         rootvisible: false,         store: 'capa',         allowdeselect : true,         border : true,         animate: true,         columns: [{             xtype: 'treecolumn',             text: 'capa',             flex: 5,             sortable: true,             dataindex: 'titulo'         },{             text: 'metadato',             flex: 2,             dataindex: 'metadato',             renderer: addurl         }],          tbar: [{             labelwidth: 100,             xtype: 'triggerfield',             id: 'campobusquedacapa',             fieldlabel: 'nombre capa:',             triggercls: 'x-form-clear-trigger',             ontriggerclick: function() {                 this.reset();                 treestore.clearfilter();                 this.focus();             },             enablekeyevents: true         }, {             xtype : 'button',             width: 20,             height: 25,             id : 'btnapagarcapas',             action: 'apagarcapas',             tooltip : 'apagar todas las capas',             padding:0         }]     });      ext.apply(this, {         title: 'tabla contenido',                    constrain: true,         header : {             titleposition : 2,             titlealign : 'center'         },         closable : false,         width : anchotoc,         height : altotoc,         x : 20,         y : 270,         layout : 'fit',         animcollapse : true,         collapsible : true,         collapsedirection : ext.component.direction_left,         items: [tree],     });      tree.on('itemcontextmenu', function(view, record, item, index, event, eopts) {         event.stopevent();          if (record.data.leaf != false) {               slider = ext.create('ext.slider.single', {                 id: record.data.id,                 hidelabel: true,                 floating: true,                 width: 200,                 minvalue: 0,                 maxvalue: 100,                 value : 70,                 //listeners: {                     //change: function (newvalue, thumb, eopts ){                                                    //var capabuscar = record.data.id;                         //var controladorubicar = aplicacion.getcontroller("controlubicar");                         //var capa =  controladorubicar.buscarcapa(capabuscar);                         //capa.setopacity(thumb/100);                     //},                     //blur: function() {                                                     //slider.setvisible(false);                         //capabuscar=null;                     //}                 //}              });             slider.showby(item, 'tl-tl', [event.getx() - view.getx(), 12]);         }     }, this);     this.callparent(arguments); } }); 

add listener controller:

ext.define('fiddle.controllers.mycontroller',{     extend : 'ext.app.controller',     alias: 'controller.mycontroller',     init : function() {         this.control({             "slider" : {                 change : function (slider, newvalue, thumb, eopts  ) {                     var capa = this.buscarcapa(slider.record.get('id'));                     if (capa) capa.setopacity(thumb/100);                 },                 blur: function(slider, event, eopts) {                                                  slider.setvisible(false);                 }             }         });     },     buscarcapa : function (id) {         return false;     } }); 

and create slider this:

listeners : {     'itemcontextmenu' : function(view, record, item, index, event, eopts) {         event.stopevent();          if (record.data.leaf != false) {             console.log(item);             slider = ext.create('ext.slider.single', {                 record : record,                 hidelabel: true,                 floating: true,                 type : 'capacontrol',                 width: 200,                 minvalue: 0,                 maxvalue: 100,                 value : 70             });             slider.showby(item, 'tl-tl', [event.getx() - view.getx(), 12]);         }     } } 

check fiddle : https://fiddle.sencha.com/#fiddle/odd