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

More Related Content

What's hot

Viewers also liked

Similar to Ext JS Introduction

Recently uploaded

Ext JS Introduction