Φόρμα εγγραφής με ExtJS

Μέσα απ' αυτόν τον οδηγό, θα δούμε πώς μπορούμε να δημιουργήσουμε μια φόρμα εγγραφής (register form), η οποία ελέγχει τα δεδομένα την ώρα που τα εισάγει ο χρήστης. Ενώ σε επόμενο άρθρο μας, θα δούμε πώς μπορούμε να την ενώσουμε με μια βάση (συγκεκριμένα MySQL) και να μπορούμε να διαχειριζόμαστε τα αντίστοιχα SQL μηνύματα.

Ολόκληρο τον κώδικα μπορείτε να τον βρείτε εδώ, ενώ μπορείτε να δείτε ενδεικτικό demo της φόρμας εδώ.

form.html

Ξεκινάμε εισάγοντας στο html αρχείο μας, τις απαραίτητες βιβλιοθήκες του ExtJS:

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="form.js"></script>

form.js

Περνάμε στο javascript αρχείο μας, και αρχίζουμε με μια βασική μέθοδο του Ext, την onReady, η οποία εκτελείτει όταν το document μας έχει φορτώσει σωστά. Έπειτα αρχικοποιούμε την δυνατότητα εμφάνισης των διαφόρων tooltips με την χρήση της Ext.QuickTips.init(). Ενώ ενεργοποιούμε τα μηνύματα χρησιμοποιώντας την Ext.form.Field.prototype.msgTarget = 'side'.
Oπότε μέχρι στιγμής έχουμε:

    Ext.onReady(function(){

    Ext.QuickTips.init();

    Ext.form.Field.prototype.msgTarget = 'side';

Συνεχίζουμε φτιάχνοντας τα διάφορα πεδία που θέλουμε να υπάρχουν στην φόρμα μας. Έστω λοιπόν, ότι θέλουμε στην φόρμα μας:

Username, Name, Surname

Και τα τρία έχουν τον ίδιο κώδικα, οπότε το μόνο που αλλάζει είναι το όνομα της μεταβλητής, το id και το fieldLabel.

    var username = new Ext.form.TextField({

      id: 'username',

      fieldLabel: 'Username',

      maxLength: 20,

      allowBlank: false

    });

    var name = new Ext.form.TextField({

      id: 'name',

      fieldLabel: 'Name',

      maxLength: 20,

      allowBlank: false

    });

    var surname = new Ext.form.TextField({

      id: 'surname',

      fieldLabel: 'Surname',

      maxLength: 20,

      allowBlank: false

    });

Phone

Το phone θα είναι ένα field, όπου θα δέχεται μόνο αριθμούς, και αφού είμαστε Ελλάδα, θα το περιορίσουμε στα 10 ψηφία.

   var phone = new Ext.form.NumberField({

      id: 'phone',

      fieldLabel: 'Phone',

      maxLength: 10,

      allowBlank: false

    });

Το μόνο που άλλαξε σε σχέση με τα προηγούμενα είναι, ότι στο field γίνεται έλεγχος να δέχεται μόνο αριθμούς και όχι σύμβολα ή γράμματα.

Password

Στο password θέλουμε να εισάγουμε τον κωδικό του χρήστη, και εμφανίζεται με αστεράκια και όχι απλό κείμενο.Οπότε έχουμε:

   var password = new Ext.form.TextField({

      id: 'pass',

      fieldLabel: 'Password',

      maxLength: 20,

      allowBlank: false,

      inputType: 'password'

    });

E-mail

Εδώ θέλουμε να μπορεί ο χρήστης να εισάγει το email του, και ταυτόχρονα να γίνεται έλεγχος από το σύστημα ότι είναι στην σωστή μορφή.Να είναι κάτι της μορφής: user@domain.com. Άρα:

   var email = new Ext.form.TextField({

      id: 'email',

      fieldLabel: 'E-mail',

      maxLength: 20,

      allowBlank: false,

      vtype: 'email'

    });

OK - Clear Buttons

Πάμε τώρα να φτιάξουμε τα buttons για την υποβολή ή την διαγραφή της φόρμας μας. Έχουμε:

    //buttons

    var submit = new Ext.Button({

      text: 'Submit',

      type: 'submit',

      handler: submitform

    })

    var reset = new Ext.Button({

      text: 'Reset',

      handler: function(){

        form.getForm().reset()

      }

    })

Submitform

Πάμε τώρα να φτιάξουμε την συνάρτηση που θα ανάλαβει τον έλεγχο και την αποστολή των δεδομένων μας. Ξεκινάμε με τον έλεγχο ότι σ'όλα τα πεδία, έχουν εισαγχθεί σωστά τα δεδομένα:

    function submitform(){

      if(isFormValid()){

        Ext.MessageBox.alert('Info","Username:'+username.getValue()+

          '<br>Password:'+password.getValue()+

          '<br>Surname:'+surname.getValue()+

          '<br>Phone:'+phone.getValue()+

          '<br>Email:'+email.getValue())

      } else {

         Ext.MessageBox.alert('Warning', 'Your Form is not valid!');

      }

    }

Και περνάμε στη κύρια επεξεργασία της φόρμας μας:

    // check if the form is valid

    function isFormValid(){

      return(username.isValid() && name.isValid() && surname.isValid() 

      && email.isValid() && password.isValid() && phone.isValid());

    }

FormPanel

Τελειώσαμε και με την επεξεργασία των δεδομένων μας, οπότε το μόνο που μένει είναι να εμφανίσουμε την φόρμα μας, μαζί με τα πεδία και τα κουμπία που δημιουργήσαμε προηγουμένως:

    var form = new Ext.FormPanel({

      labelWidth: 75,

      frame: true,

      title: 'Register Form',

      bodyStyle:'padding:5px 5px 0',

      width: 350,

      defaults: {width: 230},

      defaultType: 'textfield',

      items: [username,password,name,surname,email,phone],

      buttons: [submit,reset]         

    });

labelWidth: Το μήκος των ετικετών.
frame: Εμφανίζει γύρω γύρω ένα border.
title: Ο τίτλος της φόρμας μας.
bodyStyle: Κάποια επιπλέον css που θέλουμε να έχει η φόρμα μας.
width: Το μήκος της φόρμα μας
defaults: Μια ρύθμιση που θα την έχουν όλα τα fields.
defaultType: Ο εξ' ορισμού τύπος που θα έχουν όλα τα αντικειμένα της φόρμας μας. Εάν δεν οριστεί, θεωρείται το "panel".
items: Όλα τα αντικείμενα που θέλουμε να περιέχει η φόρμα μας.
buttons: Τα αντίστοιχα buttons

Και την εμφανίζουμε ως εξής:

 form.render(document.body);

 });

Εδώ ολοκληρώσαμε, το πρώτο μέρος του άρθρου μας. Η φόρμα είναι ενδεικτική και μπορούμε να την προσαρμόσουμε στις ανάγκες της ιστοσελίδας μας. Στο δεύτερο μέρος του άρθρου μας, θα δούμε πώς μπορούμε να την ενώσουμε με μια βάση δεδομένων για την αποθήκευση των στοιχείων.

Comments

by AmyMF26 (not verified) | Sun, 02/21/2010 - 01:58

answer this topic

There are numbers of reasons to buy essay papers related to this topic at the papers writing service. You have to get know that an academic success depends on famous quality original essay. So, it’s your choise to accomplish the academic research paper or to take an aid of the reliable essays performing service.

[ Experts-Zone ]