docs/source/UserForm.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.ns('App', 'App.user');
   9 <div id="cls-App.user.FormPanel"></div>/**
  10  * @class App.user.FormPanel
  11  * A typical FormPanel extension
  12  */
  13 App.user.Form = Ext.extend(Ext.form.FormPanel, {
  14     renderTo: 'user-form',
  15     iconCls: 'silk-user',
  16     frame: true,
  17     labelAlign: 'right',
  18     title: 'User -- All fields are required',
  19     frame: true,
  20     width: 500,
  21     defaultType: 'textfield',
  22     defaults: {
  23         anchor: '100%'
  24     },
  25
  26     // private A pointer to the currently loaded record
  27     record : null,
  28
  29     <div id="method-App.user.FormPanel-initComponent"></div>/**
  30      * initComponent
  31      * @protected
  32      */
  33     initComponent : function() {
  34         // build the form-fields.  Always a good idea to defer form-building to a method so that this class can
  35         // be over-ridden to provide different form-fields
  36         this.items = this.buildForm();
  37
  38         // build form-buttons
  39         this.buttons = this.buildUI();
  40
  41         // add a create event for convenience in our application-code.
  42         this.addEvents({
  43             <div id="event-App.user.FormPanel-create"></div>/**
  44              * @event create
  45              * Fires when user clicks [create] button
  46              * @param {FormPanel} this
  47              * @param {Object} values, the Form's values object
  48              */
  49             create : true
  50         });
  51
  52         // super
  53         App.user.Form.superclass.initComponent.call(this);
  54     },
  55
  56     /**
  57      * buildform
  58      * @private
  59      */
  60     buildForm : function() {
  61         return [
  62             {fieldLabel: 'Email', name: 'email', allowBlank: false, vtype: 'email'},
  63             {fieldLabel: 'First', name: 'first', allowBlank: false},
  64             {fieldLabel: 'Last', name: 'last', allowBlank: false}
  65         ];
  66     },
  67
  68     /**
  69      * buildUI
  70      * @private
  71      */
  72     buildUI: function(){
  73         return [{
  74             text: 'Save',
  75             iconCls: 'icon-save',
  76             handler: this.onUpdate,
  77             scope: this
  78         }, {
  79             text: 'Create',
  80             iconCls: 'silk-user-add',
  81             handler: this.onCreate,
  82             scope: this
  83         }, {
  84             text: 'Reset',
  85             handler: function(btn, ev){
  86                 this.getForm().reset();
  87             },
  88             scope: this
  89         }];
  90     },
  91
  92     <div id="method-App.user.FormPanel-loadRecord"></div>/**
  93      * loadRecord
  94      * @param {Record} rec
  95      */
  96     loadRecord : function(rec) {
  97         this.record = rec;
  98         this.getForm().loadRecord(rec);
  99     },
 100
 101     <div id="method-App.user.FormPanel-onUpdate"></div>/**
 102      * onUpdate
 103      */
 104     onUpdate : function(btn, ev) {
 105         if (this.record == null) {
 106             return;
 107         }
 108         if (!this.getForm().isValid()) {
 109             App.setAlert(false, "Form is invalid.");
 110             return false;
 111         }
 112         this.getForm().updateRecord(this.record);
 113     },
 114
 115     <div id="method-App.user.FormPanel-onCreate"></div>/**
 116      * onCreate
 117      */
 118     onCreate : function(btn, ev) {
 119         if (!this.getForm().isValid()) {
 120             App.setAlert(false, "Form is invalid");
 121             return false;
 122         }
 123         this.fireEvent('create', this, this.getForm().getValues());
 124         this.getForm().reset();
 125     },
 126
 127     <div id="method-App.user.FormPanel-onReset"></div>/**
 128      * onReset
 129      */
 130     onReset : function(btn, ev) {
 131         this.fireEvent('update', this, this.getForm().getValues());
 132         this.getForm().reset();
 133     }
 134 });
 135 </pre>    \r
 136 </body>\r
 137 </html>