Date post: | 19-Oct-2015 |
Category: |
Documents |
Upload: | jose-antonio-campos-segura |
View: | 35 times |
Download: | 0 times |
of 15
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 4 2
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
Getting Started with Ext JS 4 3
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.
Getting Started with Ext JS 4 4
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
Getting Started with Ext JS 4 5
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.
Getting Started with Ext JS 4 6
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
Getting Started with Ext JS 4 7
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.' } ] }); } });
Getting Started with Ext JS 4 8
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
Getting Started with Ext JS 4 9
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
Getting Started with Ext JS 4 10
Generate Project Structure
Create sample Sencha ExtJs project structure with following command.
sencha -sdk /path/to/SDK generate app extjsExample
/path/to/extjsExample
Getting Started with Ext JS 4 11
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' }
]
});
Getting Started with Ext JS 4 12
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
Getting Started with Ext JS 4 13
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/
Getting Started with Ext JS 4 14
Graphical Picture of Sencha Architect
Tool Box
The Application Toolbar
Canvas Configuration
Project Inspector Help
Getting Started with Ext JS 4 15
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.