Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ExtJS Forms

4,623 views

Published on

Tips and tricks for attractive forms and maintainable code.

Published in: Technology, Business
  • Be the first to comment

ExtJS Forms

  1. 1. EXTJS FORMSTips & Tricks for Attractive Forms and Maintainable Code
  2. 2. GOALS• Simplifyform & controller code• Leverage associations• Simple, attractive design• Intuitive controls
  3. 3. SIMPLIFYINGFORMS AND CONTROLLERS
  4. 4. SIMPLIFY... Form Goal
  5. 5. SIMPLIFY...Controller Goal
  6. 6. SIMPLIFY...ModelFormPanel • Autocreate phantom Models • Autoload Models based on id • Leverage loadRecord() to populate the form fields
  7. 7. SIMPLIFY...ModelFormPanel
  8. 8. SIMPLIFY...True, bi-directional binding between Models and Forms
  9. 9. LEVERAGING ASSOCIATIONS
  10. 10. LEVERAGING ASSOCIATIONS1. Let ModelFormPanel propagate associated fields
  11. 11. LEVERAGING ASSOCIATIONS 2. Incorporate DataViewField and related code
  12. 12. LEVERAGING ASSOCIATIONS 3. Create field for the association
  13. 13. LEVERAGING ASSOCIATIONS 4. Create form for the association’s model
  14. 14. LEVERAGING ASSOCIATIONS 5. Add field to your ModelFormPanel subclass
  15. 15. LEVERAGING ASSOCIATIONS Popup Form DataViewField
  16. 16. Questions on Associations?
  17. 17. STYLING FORMS
  18. 18. STYLING FORMS 1. Override default styles for inputs
  19. 19. STYLING FORMS2. Reuse forms for viewing data using readOnly and readOnlyCls
  20. 20. STYLING FORMS3. Use colors with buttons to convey purpose
  21. 21. SMART TOOLBARS
  22. 22. SMART TOOLBARS 1. Hide save/cancel buttons when viewing
  23. 23. SMART TOOLBARS2. Enable save and reset buttonsonly when form is dirty and valid
  24. 24. LET’S TAKE A LOOK
  25. 25. QUESTIONS?
  26. 26. THANK YOUCode Sampleshttps://github.com/ModusCreateOrg/form-presoSlideshttp://www.slideshare.net/moduscreateBlog Postshttp://moduscreate.com/blogMeaaron@moduscreate.com | @aaron_n_smith

×