examples/writer/UserForm.js

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