Ext JS Introduction

What is Ext JS?

• A JavaScript Framework for RIA
• Developed and Supported Sencha Inc
• Started as extension to Yahoo's YUI

Features and Highlights
• Rich, Modern UI Widgets
• Layout Controls
• MVC Application Architecture
• Charts
• Data Package
• Cross Browser Support

Ext JS vs jQuery
Ext JS jQuery
• Not free for commercial • Free
• Competitively Smaller • Most famous, Huge
Community Community
• Inbuilt powerful UI widgets • Lacks complex UI elements
• RIA - Super Easy • RIA - Not Easy
• MVC Application • No MVC
Architecture
• Excellent Charts • No Charts
• Excellent Layout Controls • No Layout Controls

Ext JS vs jQuery
Ext JS jQuery
• Rich data management • No
• Little bit Longer Learning • Easy to Start
Curve
• Complete and Robust • Not that much
• Library Size More • Lightweight
• Easy Development and • Complex
Maintenance
• Good Code Readability • No
• Better Documentation and • Not Bad
Samples

Which one to use?
Ext JS jQuery
• Complex UI • Need to work with HTML
• Lots of Windows and you define
Section • Already have running
• Desktop Like application and only need
• Admin Web App some DOM manipulation
• Don’t want to use any • Need to some AJAX/JS
server side scripting tweaking to an existing UI
language or HTML

Hello world
<html> <body>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script language="javascript" src="helloworld.js"></script>
</body> </html>
Ext.application({
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}});

Some Basics - Components
var button = new Ext.Button({
text: ‘Click me!‘,
width: 100,
height: 20
});

var panel= new Ext.Panel({
title: 'A Panel',
border: true,
items: [
new Ext.Panel({ { xtype: ‘panel’,
title: ‘Child panel!‘ title: ‘Child Panel’
}) }
]
});

Some Basics - Events
var button = new Ext.Button({
text: 'Click me!',
width: 100,
height: 20,
listeners: {
'click': function() {
alert('Clicked!');
}
}
});

btn.on('mouseover', function() {
alert(‘Mouse Over');
});

DOM Pointers
Each dom node has 5 pointers which allow you to
navigate through the DOM
parentNode
previousSibling
nextSibling
firstChild
lastChild

Ext.DomQuery
Ext.get('myEl')
Ext.select('div.foo, span.bar');
Ext.get('myEl').select('div.foo'); or
Ext.select('div.foo', true, 'myEl');
Ext.select('div.foo[title=bar]:first');
Ext.select('div span');
Ext.select('div > span');
Ext.select('a[href=http://extjs.com]');
Ext.select('div:next(span.header));
Ext.select('div:{display=none}');
http://docs.sencha.com/core/manual/content/domquery.h
tml

Inheritance
MyClass = Ext.extend(Ext.SomeClass, {
someFunction : function(arg1, arg2){
// custom code
// call base class

MyClass.superclass.someFunction.call(this, arg1,
arg2);
// custom code
}
);

Layouts
• Absolute
• Accordion
• Anchor
• Border
• Card (TabPanel)
• Card (Wizard)
• Column
• Fit
• Table
• vbox
• hBox
– http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/layout-
browser/layout-browser.html

MVC
• Model is a collection of fields and their data. Models
know how to persist themselves through the data
package.
• View is any type of component - grids, trees and panels
are all views.
• Controllers are special places to put all of the code that
makes your app work - whether that's rendering
views, instantiating Models, or any other app logic.
– http://docs.sencha.com/ext-js/4-
1/#!/guide/application_architecture
– http://dev.sencha.com/deploy/ext-4.1.0-
gpl/examples/app/feed-viewer/feed-viewer.html

Application and Viewport
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM‘, appFolder: 'app‘,
controllers: [ 'Users' ],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [ { xtype: 'userlist‘ } ]
});
}
});

Controller
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [ 'user.List’ +,
stores: *'Users’ +, models: *'User'+,
init: function() {
this.control({
'userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function(grid, record) {
console.log('Double clicked on ' + record.get('name'));
}
});

View
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist‘,
title: 'All Users',
store: 'Users',
initComponent: function() {
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];
this.callParent(arguments);
}
});

Model
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['name', 'email']
});

Communication Between Controllers
1. Add MyApp.app = this; in application
2. Declare a variable for controller in application
3. Set the controller variable declared in
application in init() function in conroller
4. Now you can call any controller easily using
MyApp.app.ContollerName.function()

References
refs: [
{ref: 'feedList', selector: 'feedlist'},
{ref: 'feedCombo', selector: 'feedwindow combobox'},
{
ref: 'feedWindow',
selector: 'feedwindow',
autoCreate: true,
xtype: 'feedwindow'
}
],

Data Store
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});

Some Sample
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/desktop/desktop.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/feed-viewer/feed-
viewer.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/calendar/index.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/live-search-grid.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/BarRenderer.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/two-trees.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/draw/Tiger.html

URLs
• Product
– http://www.sencha.com/products/extjs/
• Samples
– http://www.sencha.com/products/extjs/examples/
– http://docs.sencha.com/ext-js/4-1/#!/example
• Documentation
– http://docs.sencha.com/ext-js/4-1/
• Videos
– http://docs.sencha.com/ext-js/4-1/#!/video

Ext JS Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Ext JS Introduction

Similar to Ext JS Introduction (20)

Recently uploaded

Recently uploaded (20)

Ext JS Introduction