Ext Js 向 html 元素添加事件

Question

How can add onChange event to my html element which is rendered inside another component

  xtype: 'component',
                        html: {
                            html: '<input  type= "color" />'
                        },
                        itemId: 'colorPicker'
                    },

I want to add the following eventlistener to the input elelement:

   theInput.addEventListener("input", function() {

   <<Do something with theColor value here>>

    }, false); 

Answer 1

In your case code is something like this:

html: '<input id=\'colorPickerBackground\' type=\'color\'></input>',
listeners: {
    afterrender: function(component) {
        var colorInput = component.getEl().down('#colorPickerBackground');
        colorInput.on('input', function() {
            console.log(colorInput.getValue());
        }); 
    }
}

Simple fiddle