Agenda

Introduction

The Class system

Layouts

MVC

Charts

DnD

anjan.mitra@gmail.com

Localization

Sencha Cmd

Best Practices
2

MVC

File Structure

Model is a collection of fields and their data (e.g. a User

model with username and password fields).

Models know how to persist themselves through the data

package, and can be linked to other models through

associations.

View is any type of component grids, trees and panels,

etc.

Controllers are special places to put all of the code that

makes the app logic.

3

MVC

MVC

Model:

Defines underlying data structure used by views

Can be accessed by view (read) and controller (read/create)

View:

Uses model data to construct view

Reads model

Created by controller

Cant exist without associated controller

Controller:

Entry point to the application

Controls application flow and logic.

Selects and instantiates Models, Views

Advantages:

Every application works the same way so you only have to
learn it once.

Its easy to share code between apps because they all work
the same way.

Dynamic class loading helps to avoid JavaScript file
embedding required in default page.

Approach

MVC

Find all closely related controls, UI elements who share

common type of data (views > models).

Find out underlying distinct datasets and views using

them (models > views)

MVC

To Retain the spirit of MVC

Model shouldnt know exact type of view its providing

data with.
2. View must know what model to pick up while rendering
to viewport.
3. View must not invoke controller methods directly.
4. Controller must know about type of Model and View
instances its referring to.

Event handlers Should be in Controller and not in

1.

View.

Views only fire the events.

Hierarchy of controllers- Each controller has its own

views and models.

How to set up interaction between controllers?

Use application wide events.

10

To Retain the spirit of MVC

Ext JS

Validations- must be in model.

Ext JS is best suited for enterprise or intranet applications

An entire CRM or ERP software.

The new class system allows us to define classes incredibly

Data querying logic must be in model.

Assume your model as an abstraction to the system that
processes your input routed by controllers and updates its
state.

easily.

Use the object-oriented programming paradigm and take

It is just a proxy class of your back end database system.

All queries to database should go through model.
Business processes if any should be formulated in model only.

advantage of the single and multiple inheritance.

Use of patterns such as the MVC, Observable.

Growing community around the library.
11

12

Getting from the CDN

The Framework

The CSS file:

http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css

The JavaScript file:

http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js

13

The Platform

14

Files And Folders in the Package

The build folder contains the descriptor files to create a

custom version of the Ext JS library.

The JSB3 files describe the files and packages to build the library

from the source code.

These JSB3 files are used by the JavaScript Builder utility.

Also has the minified version of the library.

15

The docs folder - documentation of the API.

The examples folder
The locale folder
The jsbuilder folder contains the tool to build and compress
the source code.
16

Files And Folders in the Package

Files And Folders in the Package

The src folder contains all the classes of the framework.

The <root> folder:

ext-all.js file: it is the complete library with all the components,
utilities, and classes. Minified.

ext-all-debug.js file: it is the same as the ext-all.js file, but not
minified. Useful for debugging the app.

ext-all-dev.js file: it is similar to the ext-all-debug.js & has
additional debug information.

ext.js file: it is the core and foundation layer for Ext JS.

The resources folder: the styles and images are located.

The welcome folder: the styles and images used in the

index.html file in the root folder.

If we use this file, we're not loading the whole library;

This file contains only the class system, the loader, and a few other

classes.
17

18

The Class System

Useful for extending and creating classes.

To create classes, Ext JS uses the Ext.ClassManager object

internally to manage the associations between the name

we defined and the actual class object in the whole
framework.

It's not recommended to use this class directly

19

20

The Class System

The Class System

Ext.define:

Internally calls the create method from the class manager in
order to create a new class.

Also can be used to override methods and properties from
an existing class.

Ext.create:

Its an alias for the instantiate method from the class
manager.

Can use this shorthand to also create objects from an
existing class.

Ext.widget:

It calls the instantiateByAlias method to create instances of
the given alias.

21

Simple Inheritance

22

Pre-processors and Post-processors

Every class in Ext JS is an instance of the Ext.Class class.

When we use the Ext.define method to define a class we

are in fact creating an instance of the Ext.Class class.

A pre-processor is a process that runs before the instance

of an Ext.Class class is created, i.e., before the new class is

created.

Each of the processes defined will change the behaviour of

the class, if needed.

23

24

Pre-processors and Post-processors

Pre-processors and Post-processors

A post-processor is a process that runs after our new class

When we create a class:

All the pre-processors run before the class is ready,
modifying the result.

The post-processors run when the class is ready to be used.

is created.

There is a process to make our class as singleton, to define
alternative names to our class, etc.

To see the registered processes:
var pre = Ext.Class.getDefaultPreprocessors(),
post = Ext.ClassManager.defaultPostprocessors;
25

26

Pre-processors

Pre-processors and Post-processors

27

28

Post-processors

Mixing Many Classes

Mimics multiple inheritance using the mixins processor.

Can mix many classes into one.

Then, the new class will have access to all the properties and
methods from the mixed classes.

The mixins pre-processor do not override existing methods or

properties in the resulting class.

The configured classes in the mixins object are iterated in the

order we have defined them and its methods and properties are
applied to the resulting class.

In order to avoid collisions, the first class that applies the method
wins and the other class just ignores the repeating method.
29

30