2/23/2010 presentation on theming Ext JS delivered at the NoVa Ext JS Meetup hosted at General Dynamics.

1. Ext JS Meetup
2/23/2010

2. Thanks!
• General Dynamics - Location
• Will McGinnis - Logistics
• Ext JS - Pizza!

3. File Structure
• KISS - Keep it Simple...
• Follow the same convention as the
core Ext CSS

4. Including Files

5. Warning
•DO NOT EDIT
•
EXT-ALL.CSS
•
EXT IMAGES

6. Style Heirarchy
• theme
• component properties
• cls
• ctCls
• defaults
• bodyStyle : ‘padding : 15px’
• component renderer function
• component template override

7. CSS Naming
Conventions
• x-<component_name>-<position>
• Panel styles for left, middle, right
• x-panel-ml
• x-panel-mc
• x-panel-mr

8. Learning Curve:Firebug

9. Themes
• any/all components
• lowest level: CSS & images
• mid-level:
• settings: icons in components
• renderers
• finest-level: templates

10. Inline-styling
• cls
• adds CSS class to component
• ctCls
• adds CSS class to component container
• disabledClass

11. Sprites
• follow the component
struture
• left & right
• top & bottom

12. Sprites

13. icons

14. Renderers
• Renderers
• function to interpret data values

15. ‘Injecting Classes’ for
Context

16. Renderers
• Property on components allowing a
function to alter output based on the value
from the record

17. Templates
• The base HTML for the Ext component