Ext js获取HTML元素的值

Question

我有一个组件，它具有在HTML属性下指定的输入类型，因此它呈现为输入类型。但是我很难确定输入类型的值....

组件：

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

在某个Ext.js事件中，我想在html中获取输入类型的值？

Answer 1

在您的案例代码中，您可以执行以下操作：

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

更多关于使用this answer中的ExtJS浏览DOM的信息。

由于您尝试创建颜色选择器，您必须查看Ext.picker.Color。

如果您仍想自己动手看看Ext.form.field.Base，可以将其作为颜色选择器的基础。