ExtJS Find the id of an element

Question

I have an app with the MVC model, in the view I create a slider with the listeners, but I want that the listeners are in the controller class, and I want to get the id of the element, but it is generated by a variable from a tree panel....

This is the 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);
}
});

Answer 1

Add this listener to your 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 the slider like 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 this fiddle : https://fiddle.sencha.com/#fiddle/odd