getting started with ext js 4

Getting Started with Ext JS 4 1

Getting Started

with Ext JS 4 By Mohib Mansuri

[email protected] www.attuneuniversity.com


Getting started with Ext JS

The first thing we need to download the framework from the official

website of sencha.

o http://www.sencha.com/products/extjs/

There are two types of licenses

o The commercial license that you need to purchase if you are

setting up to develop a closed source project, usually used for

corporations, banks, or enterprises

o The other available license is the GPLv3 for open source

projects.

We can also use the available Content Delivery Network (CDN) so

we don't need to store the library in our own computer or server:

The CSS file:

o http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-

all.css

The JavaScript file:

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


Ext JS layers

Ext JS is divided in three layers

Ext JS 4

Ext Core

Ext Foundation

In the Ext Foundation layer the Ext object is created, useful utilities and

the class system that permits us to extend classes, override methods and

properties, add mixins and configurations to classes, and more.

The Ext Core layer includes the classes that control the Document Object

Model (DOM), set and firing events, support for Ajax requests, and classes

to search the DOM using CSS selectors.

The Ext JS 4 layer includes all the components, widgets, and many more

features.


Web Browsers

Ext JS 4 supports all major web browsers, from IE 6 to the latest version

of Google Chrome. Throughout development, however, we proposed

below browser

Google Chrome 10+

Apple Safari 5+

Mozilla Firefox 4+ with the Firebug Web Development Plugin

Web Server

Local web server is not a requirement to use Ext JS 4, it is well suggested

that you develop with one, since XHR over local file:// protocol has cross

origin control on most browsers. If you don't already have a local web

server it is recommended that you download and install Apache HTTP

Server.

Recommended server

o Apache on Windows

o Apache on Linux

o Mac OS X comes with a build in apache installation


Ext JS 4 SDK

Your web root directory may vary depending on your operating system, but

if you are using Apache it is usually located at:

Windows - "C:\Program Files\Apache Software

Foundation\Apache2.2\htdocs"

Linux - "/var/www/"

Mac OS X - "/Library/WebServer/Documents/"

Once you have completed installing Apache navigate to

http://localhost/extjs/index.html in your browser. If an Ext JS 4 welcome

page appears, you are all set.


Application Structure

The following is the suggested directory structure for an Ext JS application:

appname is a directory that includes all your application's source files

app includes all your classes, the naming style of which should follow the

convention listed in the Class System guide

extjs includes the Ext JS 4 SDK files

resources includes additional CSS and image files which are responsible

for the look and feel of the application, as well as other static resources

(XML, JSON, etc.)

index.html is the entry-point HTML document

app.js includes your application's logic

- appname - app - namespace - Class1.js - Class2.js - ... - extjs - resources - css - images - ... - app.js - index.html


HTML document - index.html

Ext JS application is contain in a single HTML document - index.html.

Open index.html and insert the following html code:

Hello Ext

extjs/resources/css/ext-all.css includes all styling information needed

for the whole framework

extjs/ext-debug.js includes a minimal set of Ext JS 4 Core library classes

app.js will includes your application code

JS File - app.js Ext.application({ name: 'HelloExt', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { title: 'Hello Ext', html : 'Hello! Welcome to Ext JS.' } ] }); } });


Sencha Cmd

Sencha Cmd is a cross-platform command line tool that offers many

automated tasks around the full life-cycle of your applications from

producing a new project to deploying an application to production.

Sencha Cmd offers a group of powerful features that work together and in

union with the Sencha Ext JS and Sencha Touch frameworks.

Sencha Cmd Capabilities

Code Generation Tools

JS Compiler

Web Server

Packaging

Management System

Build Scripts

Tuning Tools

Workspace Management

Image Capture

Flexible Configuration System

Logging

Third-party Software

Code Generation Hooks


Sencha Cmd - System Setup

Download and install

Java Run-time Environment or JRE

o http://www.oracle.com/technetwork/java/javase/downloads/

index.html

Sencha Cmd

o http://www.sencha.com/products/sencha-cmd

Ext JS SDK

o http://www.sencha.com/products/extjs/

Ruby 1.9.3

o http://rubyinstaller.org/downloads


Generate Project Structure

Create sample Sencha ExtJs project structure with following command.

sencha -sdk /path/to/SDK generate app extjsExample

/path/to/extjsExample


Create Sample Controller

Go to project path and create sample controller through Sencha Cmd.

sencha generate controller Main

With above command, it should create controller with name Main

Ext.define('extjsExample.controller.Main', {

extend: 'Ext.app.Controller'

});

Create Sample Model

Create Model using following command

sencha generate model Server name:string

With above command, it will create model with name Server and with field

name and type as string

Ext.define('extjsExample.model.Server', {

extend: 'Ext.data.Model',

fields: [

{ name: 'name', type: 'string' }

]

});


Create Sample View

Create sample view using following command

sencha generate view Registration

Above command will create a sample view with name specified.

Ext.define("extjsExample.view.MyCmdView", {

extend: 'Ext.Component',

html: 'Hello, World!!'

});

Packaging Application

Packaging reduces the loading time of your application. This steps to

package your app using Sencha Cmd.

Go to your project folder and execute the following command.

sencha app build production


Sencha Architect

The Sencha Architect desktop application is a tool that will help you

design and develop an application faster than coding it by hand

Drag-and-Drop the components into a canvas and then add the

functionality

We can get a free trial (30days) from the official website of Sencha,

we can also buy the license

Download Sencha Architect

o http://www.sencha.com/products/architect/


Graphical Picture of Sencha Architect

Tool Box

The Application Toolbar

Canvas Configuration

Project Inspector Help


Tool Box

The Toolbox contains all the components of either Sencha Touch or Ext

JS. Filters, categories, and search make locating the right component

simpler.

The Application Toolbar

The Application Toolbar offers shortcuts to the most used features.

Canvas

Architects Canvas is where you can construct your applications UI

visually. Drag a few components from the toolbox and configure them the

way you like.

Configuration

The Component Configuration is where you can fine tune your application

to the last detail. Contextual help means everything is explained.

Project Inspector

Architects Project Inspector allows you to see the structure of your

application and work on it fast and exactly.

Help

Architect appears with our online docs built right in, so they are always up-

to-date. Got a question? Add your comment right in the docs.

getting started with ext js 4

Documents

ext js layers ext js

ext js application

web browsers ext js

ext core ext foundation

ext object

ext foundation layer

ext core layer

o http