module Ext_form_field_Base: sig .. end

Base class for form fields that provides default event handling, rendering, and other common functionality needed by all form field types. Utilizes the Ext.form.field.Field mixin for value handling and validation, and the Ext.form.Labelable mixin to provide label and error message display.

In most cases you will want to use a subclass, such as Ext.form.field.Text or Ext.form.field.Checkbox, rather than creating instances of this class directly. However if you are implementing a custom form field, using this as the parent class is recommended.

Values and Conversions

Because Base implements the Field mixin, it has a main value that can be initialized with the value config and manipulated via the getValue and setValue methods. This main value can be one of many data types appropriate to the current field, for instance a Date field would use a JavaScript Date object as its value type. However, because the field is rendered as a HTML input, this value data type can not always be directly used in the rendered field.

Therefore Base introduces the concept of a "raw value". This is the value of the rendered HTML input field, and is normally a String. The getRawValue and setRawValue methods can be used to directly work with the raw value, though it is recommended to use getValue and setValue in most cases.

Conversion back and forth between the main value and the raw value is handled by the valueToRaw and rawToValue methods. If you are implementing a subclass that uses a non-String value data type, you should override these methods to handle the conversion.

Rendering

The content of the field body is defined by the fieldSubTpl XTemplate, with its argument data created by the getSubTplData method. Override this template and/or method to create custom field renderings.

Example usage:

// A simple subclass of Base that creates a HTML5 search field. Redirects to the
// searchUrl when the Enter key is pressed.222
Ext.define('Ext.form.SearchField', {
    extend: 'Ext.form.field.Base',
    alias: 'widget.searchfield',

    inputType: 'search',

    // Config defining the search URL
    searchUrl: 'http://www.google.com/search?q={0}',

    // Add specialkey listener
    initComponent: function() {
        this.callParent();
        this.on('specialkey', this.checkEnterKey, this);
    },

    // Handle enter key presses, execute the search if the field has a value
    checkEnterKey: function(field, e) {
        var value = this.getValue();
        if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {
            location.href = Ext.String.format(this.searchUrl, value);
        }
    }
});

Ext.create('Ext.form.Panel', {
    title: 'Base Example',
    bodyPadding: 5,
    width: 250,

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },
    items: [{
        xtype: 'searchfield',
        fieldLabel: 'Search',
        name: 'query'
    }],
    renderTo: Ext.getBody()
});

class type t = object .. end

class type configs = object .. end

class type events = object .. end

class type statics = object .. end

val of_configs : configs Js.t -> t Js.t

val to_configs : t Js.t -> configs Js.t