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??

score 1 · Accepted Answer · edited May 23 '17 at 11:45

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.

edited May 23 '17 at 11:45

Community

1
1

answered Feb 17 '16 at 12:15

Sergey Novikov

4,096
7
33
59

ext.picker.Color has only 40 colors I need more – Jacob Feb 17 '16 at 12:29
1

Better written as `component.getEl().down('#foo');` – Evan Trimboli Feb 17 '16 at 12:30
@EvanTrimboli I agree, just wanted to point out the use of `Ext.dom.Query.select`. – Sergey Novikov Feb 17 '16 at 12:32
@JacobSo So I thought, in that case, I described how you can get the value of the field. – Sergey Novikov Feb 17 '16 at 12:35
I keep getting: d.getElementById is not a function triggered by console.log(Ext.query('#colorPickerBackground', component.getEl())[0].value); – Jacob Feb 17 '16 at 12:43
@Jacob Can you update provided fiddle to reproduce this issue? – Sergey Novikov Feb 17 '16 at 12:49
@EvanTrimboli With this code I actually get `Ext.dom.Element`, not actual DOM element, so I have to use ExtJS's `.on()` instead of JS's `addEventListener()` – Sergey Novikov Feb 17 '16 at 19:22
@Jacob Updated my fiddle, check it out – Sergey Novikov Feb 17 '16 at 19:33

Ext js get value of HTML element

1 Answers1