Tips and tricks for attractive forms and maintainable code.

1. EXTJS FORMS
Tips & Tricks for Attractive Forms and Maintainable Code

2. GOALS
• Simplifyform &
controller code
• Leverage associations
• Simple, attractive design
• Intuitive controls

3. SIMPLIFYING
FORMS AND CONTROLLERS

4. SIMPLIFY...
Form Goal

5. SIMPLIFY...
Controller Goal

6. SIMPLIFY...
ModelFormPanel
• Autocreate
phantom Models
• Autoload Models
based on id
• Leverage
loadRecord() to
populate the form
fields

7. SIMPLIFY...
ModelFormPanel

8. SIMPLIFY...
True, bi-directional binding between Models and Forms

9. LEVERAGING ASSOCIATIONS

10. LEVERAGING ASSOCIATIONS
1. Let ModelFormPanel propagate associated fields

11. LEVERAGING ASSOCIATIONS
2. Incorporate DataViewField and related code

12. LEVERAGING ASSOCIATIONS
3. Create field for the association

13. LEVERAGING ASSOCIATIONS
4. Create form for the
association’s model

14. LEVERAGING ASSOCIATIONS
5. Add field to your
ModelFormPanel
subclass

15. LEVERAGING ASSOCIATIONS
Popup Form DataViewField

16. Questions on Associations?

17. STYLING FORMS

18. STYLING FORMS
1. Override default styles for inputs

19. STYLING FORMS
2. Reuse forms for viewing data using readOnly and readOnlyCls

20. STYLING FORMS
3. Use colors with buttons to convey purpose

21. SMART TOOLBARS

22. SMART TOOLBARS
1. Hide save/cancel
buttons when
viewing

23. SMART TOOLBARS
2. Enable save and reset buttons
only when form is dirty and valid

24. LET’S TAKE A LOOK

25. QUESTIONS?

26. THANK YOU
Code Samples
https://github.com/ModusCreateOrg/form-preso
Slides
http://www.slideshare.net/moduscreate
Blog Posts
http://moduscreate.com/blog
Me
aaron@moduscreate.com | @aaron_n_smith