/**
 * Hidden fields allow you to easily inject additional data into a {@link Ext.form.Panel form}
 * without displaying additional fields on the screen. This is often useful for sending dynamic
 * or previously collected data back to the server in the same request as the normal form
 * submission.
 * For example, here is how we might set up a form to send back a hidden userId field:
 *
 * ```javascript
 * @example({ framework: 'extjs' })
 * var form = Ext.create('Ext.form.Panel', {
 *     fullscreen: true,
 *     items: [{
 *         xtype: 'fieldset',
 *         title: 'Enter your name',
 *         items: [{
 *                   xtype: 'hiddenfield',
 *                   name: 'userId',
 *                   value: 123
 *                }, {
 *                   xtype: 'checkboxfield',
 *                   label: 'Enable notifications',
 *                   name: 'notifications'
 *                }]
 *         }]
 *  });
 * ```
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react';
 * import { ExtContainer, ExtFormPanel, ExtHiddenField } from '@sencha/ext-react';
 * export default class MyExample extends Component {
 *     render() {
 *         return (
 *             <ExtContainer layout="center">
 *                 <ExtFormPanel shadow>
 *                     <ExtHiddenField
 *                       value="123"
 *                       name="hide"
 *                     />
 *                 </ExtFormPanel>
 *             </ExtContainer>
 *         )
 *     }
 * }
 * ```
 * ```javascript
 * @example({framework: 'ext-angular', packages:['ext-angular']})
 * import { Component } from '@angular/core'
 * declare var Ext: any;
 * @Component({
 *  selector: 'app-root-1',
 *  styles: [``],
 *  template: `
 *      <ExtContainer layout="center">
 *          <ExtFormPanel shadow="true">
 *              <ExtHiddenField
 *                  value="123"
 *                  name="hide"
 *              >
 *              </ExtHiddenField>
 *          </ExtFormPanel>
 *      </ExtContainer>
 *  `
 * })
 * export class AppComponent {} 
 * ```
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * <ext-container layout="center">
 *        <ext-hiddenfield
 *             value="123"
 *             name="hide"
 *         >
 *        </ext-hiddenfield>
 * </ext-container>
 * ```
 * ```javascript
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 })
 * import '@sencha/ext-web-components/dist/ext-container.component';
 * import '@sencha/ext-web-components/dist/ext-formpanel.component';
 * import '@sencha/ext-web-components/dist/ext-hiddenfield.component';
 *
 * export default class HiddenFieldComponent {} 
 * ```
 *
 * In the form above we created two fields - a hidden field and a
 * {@link Ext.field.Checkbox check box field}. Only the check box will be visible, but both fields
 * will be submitted. Hidden fields cannot be tabbed to - they are removed from the tab index so
 * when your user taps the next/previous field buttons the hidden field is skipped over.
 *
 * It's easy to read and update the value of a hidden field within a form. Using the example
 * above, we can get a reference to the hidden field and then set it to a new value in 2 lines
 * of code:
 *
 *     var userId = form.down('hiddenfield')[0];
 *     userId.setValue(1234);
 */
Ext.define('Ext.field.Hidden', {
    extend: 'Ext.field.Input',
    alternateClassName: 'Ext.form.Hidden',
    xtype: 'hiddenfield',
 
    /**
     * @cfg
     * @hide
     */
    inputType: 'hidden',
 
    hidden: true,
 
    classCls: Ext.baseCSSPrefix + 'hiddenfield'
});