/** * @class Ext.field.InputMask * @extend Ext.Base * * Input masks provide a way for developers to define rules that govern user input. This ensures * that data is submitted in an expected format and with the appropriate character set. * * Frequent uses of input masks include: * * + Zip or postal codes * + Times * + Dates * + Telephone numbers * * ## Character Sets * * Input mask characters can be defined by representations of the desired set. For instance, * if you only want to allow numbers, you can use 0 or 9. Here is the list of default * representations: * * + '*': '[A-Za-z0-9]' // any case letter A-Z, any integer * + 'a': '[a-z]' // any lower case letter a-z * + 'A': '[A-Z]' // any upper case letter A-Z * + '0': '[0-9]' // any integer * + '9': '[0-9]' // any integer * * So, to create a telephone input mask, you could use: * * + (000) 000-0000 * * or * * + (999) 999-9999 * * @example packages=[reactor] * import React, { Component } from 'react'; * import { FormPanel, Container, TextField, FieldSet } from '@extjs/ext-react'; * * export default class MyExample extends Component { * render() { * return ( * <Container layout="center"> * <FormPanel shadow> * <FieldSet title="Input Mask for Phone Numbers" margin="0 0 20 0"> * <TextField placeHolder="Enter Phone Number..." label="Phone Number" required inputMask="(999) 999-9999"/> * </FieldSet> * </FormPanel> * </Container> * ) * } * } */ /** * @cfg {String} [pattern=null] (required) * @accessor */