Ext JS Meetup Presentation

1,675 views

Published on

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

Published in: Design, Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,675
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

















  • Ext JS Meetup Presentation

    1. 1. Ext JS Meetup 2/23/2010
    2. 2. Thanks! • General Dynamics - Location • Will McGinnis - Logistics • Ext JS - Pizza!
    3. 3. File Structure • KISS - Keep it Simple... • Follow the same convention as the core Ext CSS
    4. 4. Including Files
    5. 5. Warning •DO NOT EDIT • EXT-ALL.CSS • EXT IMAGES
    6. 6. Style Heirarchy • theme • component properties • cls • ctCls • defaults • bodyStyle : ‘padding : 15px’ • component renderer function • component template override
    7. 7. CSS Naming Conventions • x-<component_name>-<position> • Panel styles for left, middle, right • x-panel-ml • x-panel-mc • x-panel-mr
    8. 8. Learning Curve:Firebug
    9. 9. Themes • any/all components • lowest level: CSS & images • mid-level: • settings: icons in components • renderers • finest-level: templates
    10. 10. Inline-styling • cls • adds CSS class to component • ctCls • adds CSS class to component container • disabledClass
    11. 11. Sprites • follow the component struture • left & right • top & bottom
    12. 12. Sprites
    13. 13. icons
    14. 14. Renderers • Renderers • function to interpret data values
    15. 15. ‘Injecting Classes’ for Context
    16. 16. Renderers • Property on components allowing a function to alter output based on the value from the record
    17. 17. Templates • The base HTML for the Ext component

    ×