“How To Create 1000 ExtJS UI Controls. Fast”. So your business requirements necessitate putting a ton of UI controls on a single page? Sure, you say, but there’s going to be a performance hit. Not so! We recently ran into this issue at ClickTime and were able to achieve the desired user experience without sacrificing speed. In this session, Allen will show you how to scale the hell out of the number of controls on a page while keeping your load times fast and your overall performance nice and zippy, even in older browsers. Allen Liu is a lead application developer at ClickTime. For the past three years, with his undeniable passion for JavaScript and other web technologies, he and his team are proud to have created one of the most sophisticated and visually pleasing time and expense reporting websites on the market today. Prior to joining ClickTime, Allen was a senior application developer for a large retail IT department and a global consulting company. He is currently spending his free time exploring NodeJS and creating the “most awesomest” wedding website for his fiancée.

1. PRACTICAL EXTJS
TIPS AND TRICKS
Techniques and hacks that saved my day
Allen Liu Oct 25, 2011
Wednesday, November 2, 11

2. Agenda
 About Allen Liu
 About ClickTime
 How we use ExtJS
 Tip: Scope Control
 Trick: Performance hacks
 Q&A
October 25, 2011 © 2011 Clicktime.com, Inc. 2
Wednesday, November 2, 11

3. Allen Liu (badallen)
October 25, 2011 © 2011 Clicktime.com, Inc. 3
Wednesday, November 2, 11

4. About Allen Liu (badallen)…
 Lead Developer @ ClickTime
 Loves Dogs & JavaScript
 Background:
 IT for global retailer
 Major consulting rm
October 25, 2011 © 2011 Clicktime.com, Inc. 4
Wednesday, November 2, 11

5. About ClickTime…
 SaaS
 Web timesheet and expense
reporting
 Founded in 1999
 Customers in 54 countries
 Small Business and
Fortune 500
 Located in San Francisco
October 25, 2011 © 2011 Clicktime.com, Inc. 5
Wednesday, November 2, 11

6. About ClickTime…
 Agile Development
 C#, JavaScript, MSSQL
 n-tier architecture
October 25, 2011 © 2011 Clicktime.com, Inc. 6
Wednesday, November 2, 11

7. About ClickTime…
Client Browser
JavaScript
ASP.NET (C#) Web Services
Middle Tier (C#)
MS SQL
October 25, 2011 © 2011 Clicktime.com, Inc. 7
Wednesday, November 2, 11

8. About ClickTime
 Why we chose Ext JS
 Started with Ext 2.x
 2 projects written with Sencha frameworks.
 ClickTime Web Timesheet (Ext JS 3.x)
 ClickTime Mobile Time & Expense (Sencha Touch)
 ClickTime ExtJS Demo
October 25, 2011 © 2011 Clicktime.com, Inc. 8
Wednesday, November 2, 11

9. Tip:
Scope Control in Custom Components
October 25, 2011 © 2011 Clicktime.com, Inc. 9
Wednesday, November 2, 11

10. Tip: Scope Control in Custom Components
 Ext JS Out-Of-The-Box UI Components are great
 Extending components is a great way to add
custom functionality
 We use CLOSURE to control the scope
October 25, 2011 © 2011 Clicktime.com, Inc. 10
Wednesday, November 2, 11

11. start of the function
private static members
private instance members
instance public
members
function execution
end of the function
Wednesday, November 2, 11

12. Wednesday, November 2, 11

13. Trick:
October 25, 2011 © 2011 Clicktime.com, Inc. 13
Wednesday, November 2, 11

14. Trick: Performance Gains through
Deception
 Our dev team needed to create a time entry
page.
October 25, 2011 © 2011 Clicktime.com, Inc. 14
Wednesday, November 2, 11

15. ComboBox ComboBox ComboBox Button Text fields Custom field
Panel 1
Row Component
Panel 2
Wednesday, November 2, 11

16. However, we would soon realize…
.
e … s !!!!
d b ent
co ul
h ere mp on
T Co
00 0+
1
!! !!!!
DR UM
RE
Wednesday, November 2, 11

17. 9784
Not Good
ms
Wednesday, November 2, 11

18. A simple question…
 How do you create hundreds or thousands
of Ext JS UI Components?
October 25, 2011 © 2011 Clicktime.com, Inc. 18
Wednesday, November 2, 11

19. You Don’t.
Wednesday, November 2, 11

20. Let me ask again…
 What if you MUST create hundreds or
thousands of Ext JS UI Components?
You fake it.
October 25, 2011 © 2011 Clicktime.com, Inc. 20
Wednesday, November 2, 11

21. This is an illusion…
Not Actual Comboboxes
(hidden) Singleton Not Actual buttons
Column Cell Click Event
Combo box
Grid Panel
(using CSS to have each cells looking like
controls)
Set value to the underlying record of the gridgrid to the
Get value from the underlying record of the from the
(hidden) combo box box
(not hidden) combo Not Actual Text Fields
Wednesday, November 2, 11

22. Ways to fake controls:
 EditorGridPanel
○ Use CSS to style each cell
○ Only works with Ext.form.Field components
 GridPanel (what we use)
○ Use CSS style each cell
○ Give Ext.grid.Column a hidden singleton object
that can be any Ext component
○ Position and show the hidden singleton object
when users click on the matching grid panel cell
October 25, 2011 © 2011 Clicktime.com, Inc. 22
Wednesday, November 2, 11

23. Good UI, Fast UI
Let me show you how we lie.
Live Demo
Wednesday, November 2, 11

24. Summary
 Use EditorGridPanel is possible, otherwise…
 Use Ext.grid.Column object to fake UI components.
 Create a singleton UI component and its related functions
(bind/unbind) at Column’s “initComponent()” function.
 Use HTML/CSS to fake the cells to look like the actual UI
components at Column’s “renderer()” function.
 Bind the singleton at Column’s “processEvent()” function.
 Unbind the singleton at its “blur” event.
October 25, 2011 © 2011 Clicktime.com, Inc.
Wednesday, November 2, 11

25. <shameless plug>
Sign up for free demo at:
www.clicktime.com
Send resumes to:
jobs@clicktime.com
</shameless plug>
Wednesday, November 2, 11

26. Demo Source Code and Slide:
www.clicktime.com/SenchaCon/2011.zip
Contact Info:
allen@clicktime.com
www.twitter.com/badallentweets
Wednesday, November 2, 11

27. Thank you.
Go AL West!
on my fantasy team!
Wednesday, November 2, 11

28. Q&A
Wednesday, November 2, 11