Ext js get value of HTML element

Question

I have a component which has an input type specified under the HTML propertie so that it renders like an input type. But I have trouble geetting the value of the input type....

Component:

xtype: 'component',
html: {
    html: '<input id=\'colorPickerBackground\' type=\'color\' onchange=\'myFunction()\' ></input>'
},
itemId: 'colorPicker',
listeners: {
    afterrender: {
        fn: me.onComponentAfterRender,
        scope: me
    }
}

On a certain Ext.js event I want to get the value of the input type inside html??

Answer 1

In your case code you can do something like this:

afterrender: function(component) {
    // Color input is Ext.dom.Element instance
    var colorInput = component.getEl().down('#colorPickerBackground');
    // Use .down('#colorPickerBackground', true) to get actual DOM element
}

Simple fiddle

More about navigating through DOM with ExtJS in this answer .

Since you trying to create color picker you have to look at Ext.picker.Color .

If you still want to do it on your own take a look at Ext.form.field.Base , you can use it as base for your color picker.