Ext JS classes and Scoping

Agenda• Get back to the basics!

• Master references (variables and object keys)

• Learn about the new class system

• Ext.class.Base

• Explore Mixins

• Ext.Loader

What have I been up to?• Bootstrapping a new company, Modus Create

• Focusing on architecting and building kick-ass Ext JS and Sencha Touch apps!

• Regional and open training on Advanced JavaScript, Ext JS 4 and Sencha Touch

• Rapidly expanding and looking for experienced developers (Sencha Touch and Ext JS)

• http://moduscreate.com

On the book front...• Early access to Sencha Touch

in Action available.

• Chapters 1-3 being distributed

• Chapter 7 is next to be published

• Chapter 4 will be published in about 2 weeks

• Chapters 5 and 6 are being worked on

On the book front...• Code for Chapter 1 is being

worked on.

• Expect TOC revisions to cover the latest changes to Ext JS

• Anyone interested in working with me on this project?

References

A “variable” reference is a pointer to a chunk of memory where some value or object is stored.

References

• Stop saying “variable”!

• Use the word “reference”

• It will remind you of what it really is - a pointer!

• We will use this word from now on

Global references

• If not scoped with the var keyword, they are treated as globals

• This is dangerous!

• The only globally scoped reference that is sanctioned is a namespace.

• Always lexically scope your references with the var keyword.

Naming convention

• Reference names should start with a lower case unless it points to a Class (constructor or singleton).

References

• Because JavaScript is loosely typed, references can be repointed from one type of value to another.

• This is where “variable” comes from.

References

• When one reference is assigned from another, they both point to the same value.

• This assignment does not result in assignment chaining!

Know thy references!

References to the same object

References to the same object

Pointing to other object members

No value chaining!

Passing objects as references

Defining Functions

• Functions are first class objects

• They have properties and methods

• They extend from Object

• They inherit from Function.prototype

• call and apply methods are inherited

Know “this"

• In JavaScript, “this” is a magic reference

• It is set upon execution of a function and is accessible inside that function

• “this” defines the execution scope

• Understanding “this” is very important.

Execution scope defined

•When a function is executed via a var reference, the default execution context (“this”) is “window”.

•When a function is executed via an object key, the execution context (“this”) is the object for which the key belongs.

Default execution for “var” functions

Default execution for object-based functions

What is the execution scope for getName()?

Execution scope defined

•When a function is executed via a var reference, the default execution context (“this”) is “window”.

•When a function is executed via an object key, the execution context (“this”) is the object for which the key belongs.

What is the execution scope for getName()?

It’s easy to mix and match...

What is the default execution scope for person2.getName()?

Forcing scope execution

• call and apply can be used to force scope execution.

• In other words, you have full control over the execution scope of any function in JavaScript.

Take this code...

using getName.call();

Take this code...

Execute person2.getName();

Function.call

A good means to forcing execution scopebut has one major limitation.

You absolutely have to define all of the arguments, which can become a management

nightmare for refactors!

Function.apply to the rescue

Function.apply allows you to force execution scope, but you pass on a list

of arguments or an array.

Take this code...

Execute person2.getName();

How constructors work

Objects == root?

• Object is the base “class” for just about everything inside of JavaScript.

• Just about all of the values that you code and interact with extend from Object.

• Strings, Arrays, Functions,etc

• Using the DOM API method document.getElementByID returns an element reference that ultimately extends Object.

Constructors

• All objects are initialized with constructors

• Constructors are nothing more than a function that is executed within the scope of a new Object

• It’s that simple!

Take this code, for example:

Constructors

• At this point, this is a normal function.

• Notice the argument.

• What will happen if we execute Person(‘Jay’);?

Constructors

• What if...?

Know when to use new?

• When the new operator is placed in front of an method, that method is treated as a “constructor”.

• Else, it’s treated as a generic function.

Prototype == reusability

• A “prototype” is an object that is more or less a blue print for future instances of an object

• It allows JavaScript to “stamp out” instances of an object that inherit the same properties

A prototype in action

Ext JS 4.0 Class System

•Completely revised from 3.0

•No use for the “new” keyword

•Use Ext.create

Ext.Base features

• Automatic Namespace management

• Statics support

• Mixin Support

• Built-in override/extension methods

• Plays nicely with the dynamic class Loader system

• Alternate class name (good for deprecation management)

Creating a class: The Ext.define pattern

Namespaced class reference

Overrides object (methods

properties)

Callback method

(optional)

Ext.define example

Auto-generated setters/gettersSetters and getters

auto-generated!

Use auto-generated setters!

Ext JS 4 Class statics

• Provides scope-independent access to static members.

• Applied before constructor is called

Statics exampleConfigure statics

Access statics

Ext JS 4 Class Mixin support

• Provides a means for extremely easy multiple inheritance

Ext.Base

MyClass

Mixin Mixin

Example Mixin class #1

Example Mixin class #2

Implementing the Mixins

Mixin instances

Identifying the cross inheritance

Members from DrivingMixin

Identifying the cross inheritance

Members from PilotingMixin

Exercising the mixins

Output from DrivingMixin

Output from PilostingMixin