Community Code: ClickTime
-
Upload
sencha -
Category
Technology
-
view
1.611 -
download
0
description
Transcript of Community Code: ClickTime
![Page 1: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/1.jpg)
PRACTICAL EXTJSTIPS AND TRICKS
Techniques and hacks that saved my day
Allen Liu Oct 25, 2011
Wednesday, November 2, 11
![Page 2: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/2.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
Agenda
About Allen Liu About ClickTime How we use ExtJS Tip: Scope Control Trick: Performance hacks Q & A
2
Wednesday, November 2, 11
![Page 3: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/3.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
Allen Liu (badallen)
3
Wednesday, November 2, 11
![Page 4: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/4.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
About Allen Liu (badallen)…
Lead Developer @ ClickTime Loves Dogs & JavaScript Background:
IT for global retailer
Major consulting !rm
4
Wednesday, November 2, 11
![Page 5: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/5.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime… SaaS
Web timesheet and expense reporting
Founded in 1999
Customers in 54 countries Small Business and
Fortune 500
Located in San Francisco
5
Wednesday, November 2, 11
![Page 6: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/6.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime…
Agile Development C#, JavaScript, MSSQL n-tier architecture
6
Wednesday, November 2, 11
![Page 7: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/7.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime…
MS SQL
Middle Tier (C#)
ASP.NET (C#) Web Services
Client BrowserJavaScript
7
Wednesday, November 2, 11
![Page 8: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/8.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
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
8
Wednesday, November 2, 11
![Page 9: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/9.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc. 9
Tip: Scope Control in Custom Components
Wednesday, November 2, 11
![Page 10: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/10.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
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
10
Wednesday, November 2, 11
![Page 11: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/11.jpg)
start of the function
end of the functionfunction execution
private static members
private instance members
instance public members
Wednesday, November 2, 11
![Page 12: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/12.jpg)
Wednesday, November 2, 11
![Page 13: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/13.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
Trick:
13
Wednesday, November 2, 11
![Page 14: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/14.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
Trick: Performance Gains through Deception Our dev team needed to create a time entry
page.
14
Wednesday, November 2, 11
![Page 15: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/15.jpg)
ComboBox ComboBox ComboBox Button Text fields Custom field
Row Component
Panel 1
Panel 2
Wednesday, November 2, 11
![Page 16: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/16.jpg)
There could be ….
1000+ Components !!!!
REDRUM!!!!!!
However, we would soon realize…
Wednesday, November 2, 11
![Page 17: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/17.jpg)
Not Good9784 ms
Wednesday, November 2, 11
![Page 18: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/18.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
A simple question…
How do you create hundreds or thousands of Ext JS UI Components?
18
Wednesday, November 2, 11
![Page 19: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/19.jpg)
You Don’t.
Wednesday, November 2, 11
![Page 20: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/20.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
Let me ask again…
What if you MUST create hundreds or thousands of Ext JS UI Components?
20
You fake it.
Wednesday, November 2, 11
![Page 21: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/21.jpg)
This is an illusion…
Not Actual Comboboxes
Not Actual Text Fields
Not Actual buttons(hidden) Singleton Combo box
Get value from the underlying record of the grid to the (not hidden) combo box
Set value to the underlying record of the grid from the (hidden) combo box
Grid Panel (using CSS to have each cells looking like
controls)
Column Cell Click Event
Wednesday, November 2, 11
![Page 22: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/22.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
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
22
Wednesday, November 2, 11
![Page 23: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/23.jpg)
Live DemoGood UI, Fast UI
Let me show you how we lie.
Wednesday, November 2, 11
![Page 24: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/24.jpg)
October 25, 2011 © 2011 Clicktime.com, Inc.
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.
Wednesday, November 2, 11
![Page 25: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/25.jpg)
<shameless plug>
Sign up for free demo at: www.clicktime.com
Send resumes to: [email protected]
</shameless plug>
Wednesday, November 2, 11
![Page 26: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/26.jpg)
Demo Source Code and Slide: www.clicktime.com/SenchaCon/2011.zip
Contact Info: [email protected]
www.twitter.com/badallentweets
Wednesday, November 2, 11
![Page 27: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/27.jpg)
Thank you.
Go AL West!on my fantasy team!
Wednesday, November 2, 11
![Page 28: Community Code: ClickTime](https://reader034.fdocuments.net/reader034/viewer/2022051411/545c5008b1af9f320a8b471c/html5/thumbnails/28.jpg)
Q & A
Wednesday, November 2, 11