community code: clicktime
Post on 07-Nov-2014
1.611 Views
Preview:
DESCRIPTION
TRANSCRIPT
PRACTICAL EXTJSTIPS AND TRICKS
Techniques and hacks that saved my day
Allen Liu Oct 25, 2011
Wednesday, November 2, 11
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
October 25, 2011 © 2011 Clicktime.com, Inc.
Allen Liu (badallen)
3
Wednesday, November 2, 11
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
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
October 25, 2011 © 2011 Clicktime.com, Inc.
About ClickTime…
Agile Development C#, JavaScript, MSSQL n-tier architecture
6
Wednesday, November 2, 11
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
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
October 25, 2011 © 2011 Clicktime.com, Inc. 9
Tip: Scope Control in Custom Components
Wednesday, November 2, 11
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
start of the function
end of the functionfunction execution
private static members
private instance members
instance public members
Wednesday, November 2, 11
Wednesday, November 2, 11
October 25, 2011 © 2011 Clicktime.com, Inc.
Trick:
13
Wednesday, November 2, 11
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
ComboBox ComboBox ComboBox Button Text fields Custom field
Row Component
Panel 1
Panel 2
Wednesday, November 2, 11
There could be ….
1000+ Components !!!!
REDRUM!!!!!!
However, we would soon realize…
Wednesday, November 2, 11
Not Good9784 ms
Wednesday, November 2, 11
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
You Don’t.
Wednesday, November 2, 11
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
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
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
Live DemoGood UI, Fast UI
Let me show you how we lie.
Wednesday, November 2, 11
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
<shameless plug>
Sign up for free demo at: www.clicktime.com
Send resumes to: jobs@clicktime.com
</shameless plug>
Wednesday, November 2, 11
Demo Source Code and Slide: www.clicktime.com/SenchaCon/2011.zip
Contact Info: allen@clicktime.com
www.twitter.com/badallentweets
Wednesday, November 2, 11
Thank you.
Go AL West!on my fantasy team!
Wednesday, November 2, 11
Q & A
Wednesday, November 2, 11
top related