src/src/field/Hidden.js

   1 /**
   2  * Hidden fields allow you to easily inject additional data into a {@link Ext.form.Panel form} without displaying
   3  * additional fields on the screen. This is often useful for sending dynamic or previously collected data back to the
   4  * server in the same request as the normal form submission. For example, here is how we might set up a form to send
   5  * back a hidden userId field:
   6  *
   7  *     @example
   8  *     var form = Ext.create('Ext.form.Panel', {
   9  *         fullscreen: true,
  10  *         items: [
  11  *             {
  12  *                 xtype: 'fieldset',
  13  *                 title: 'Enter your name',
  14  *                 items: [
  15  *                     {
  16  *                         xtype: 'hiddenfield',
  17  *                         name: 'userId',
  18  *                         value: 123
  19  *                     },
  20  *                     {
  21  *                         xtype: 'checkboxfield',
  22  *                         label: 'Enable notifications',
  23  *                         name: 'notifications'
  24  *                     }
  25  *                 ]
  26  *             }
  27  *         ]
  28  *     });
  29  *
  30  * In the form above we created two fields - a hidden field and a {@link Ext.field.Checkbox check box field}. Only the
  31  * check box will be visible, but both fields will be submitted. Hidden fields cannot be tabbed to - they are removed
  32  * from the tab index so when your user taps the next/previous field buttons the hidden field is skipped over.
  33  *
  34  * It's easy to read and update the value of a hidden field within a form. Using the example above, we can get a
  35  * reference to the hidden field and then set it to a new value in 2 lines of code:
  36  *
  37  *     var userId = form.down('hiddenfield')[0];
  38  *     userId.setValue(1234);
  39  *
  40  * For more information regarding forms and fields, please review [Using Forms in Sencha Touch Guide](../../../components/forms.html)
  41  */
  42 Ext.define('Ext.field.Hidden', {
  43     extend: 'Ext.field.Text',
  44     alternateClassName: 'Ext.form.Hidden',
  45     xtype: 'hiddenfield',
  46
  47     config: {
  48         /**
  49          * @cfg
  50          * @inheritdoc
  51          */
  52         component: {
  53             xtype: 'input',
  54             type : 'hidden'
  55         },
  56
  57         /**
  58          * @cfg
  59          * @inheritdoc
  60          */
  61         ui: 'hidden',
  62
  63         /**
  64          * @cfg hidden
  65          * @hide
  66          */
  67         hidden: true,
  68
  69         /**
  70          * @cfg {Number} tabIndex
  71          * @hide
  72          */
  73         tabIndex: -1
  74     }
  75 });