--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.ns('App', 'App.user');
+<div id="cls-App.user.FormPanel"></div>/**
+ * @class App.user.FormPanel
+ * A typical FormPanel extension
+ */
+App.user.Form = Ext.extend(Ext.form.FormPanel, {
+ renderTo: 'user-form',
+ iconCls: 'silk-user',
+ frame: true,
+ labelAlign: 'right',
+ title: 'User -- All fields are required',
+ frame: true,
+ width: 500,
+ defaultType: 'textfield',
+ defaults: {
+ anchor: '100%'
+ },
+
+ // private A pointer to the currently loaded record
+ record : null,
+
+ <div id="method-App.user.FormPanel-initComponent"></div>/**
+ * initComponent
+ * @protected
+ */
+ initComponent : function() {
+ // build the form-fields. Always a good idea to defer form-building to a method so that this class can
+ // be over-ridden to provide different form-fields
+ this.items = this.buildForm();
+
+ // build form-buttons
+ this.buttons = this.buildUI();
+
+ // add a create event for convenience in our application-code.
+ this.addEvents({
+ <div id="event-App.user.FormPanel-create"></div>/**
+ * @event create
+ * Fires when user clicks [create] button
+ * @param {FormPanel} this
+ * @param {Object} values, the Form's values object
+ */
+ create : true
+ });
+
+ // super
+ App.user.Form.superclass.initComponent.call(this);
+ },
+
+ /**
+ * buildform
+ * @private
+ */
+ buildForm : function() {
+ return [
+ {fieldLabel: 'Email', name: 'email', allowBlank: false, vtype: 'email'},
+ {fieldLabel: 'First', name: 'first', allowBlank: false},
+ {fieldLabel: 'Last', name: 'last', allowBlank: false}
+ ];
+ },
+
+ /**
+ * buildUI
+ * @private
+ */
+ buildUI: function(){
+ return [{
+ text: 'Save',
+ iconCls: 'icon-save',
+ handler: this.onUpdate,
+ scope: this
+ }, {
+ text: 'Create',
+ iconCls: 'silk-user-add',
+ handler: this.onCreate,
+ scope: this
+ }, {
+ text: 'Reset',
+ handler: function(btn, ev){
+ this.getForm().reset();
+ },
+ scope: this
+ }];
+ },
+
+ <div id="method-App.user.FormPanel-loadRecord"></div>/**
+ * loadRecord
+ * @param {Record} rec
+ */
+ loadRecord : function(rec) {
+ this.record = rec;
+ this.getForm().loadRecord(rec);
+ },
+
+ <div id="method-App.user.FormPanel-onUpdate"></div>/**
+ * onUpdate
+ */
+ onUpdate : function(btn, ev) {
+ if (this.record == null) {
+ return;
+ }
+ if (!this.getForm().isValid()) {
+ App.setAlert(false, "Form is invalid.");
+ return false;
+ }
+ this.getForm().updateRecord(this.record);
+ },
+
+ <div id="method-App.user.FormPanel-onCreate"></div>/**
+ * onCreate
+ */
+ onCreate : function(btn, ev) {
+ if (!this.getForm().isValid()) {
+ App.setAlert(false, "Form is invalid");
+ return false;
+ }
+ this.fireEvent('create', this, this.getForm().getValues());
+ this.getForm().reset();
+ },
+
+ <div id="method-App.user.FormPanel-onReset"></div>/**
+ * onReset
+ */
+ onReset : function(btn, ev) {
+ this.fireEvent('update', this, this.getForm().getValues());
+ this.getForm().reset();
+ }
+});
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff