Ext JS Introduction

transcript

- Anand Dayalan

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

What is Ext JS?

Features and Highlights

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

Ext JS vs jQuery

Ext JS• Not free for commercial• Competitively Smaller

Community• Inbuilt powerful UI widgets• RIA - Super Easy• MVC Application

Architecture• Excellent Charts• Excellent Layout Controls

jQuery• Free• Most famous, Huge

Community• Lacks complex UI elements• RIA - Not Easy• No MVC

• No Charts• No Layout Controls

Ext JS vs jQuery

Ext JS• Rich data management• Little bit Longer Learning

Curve• Complete and Robust• Library Size More• Easy Development and

Maintenance• Good Code Readability• Better Documentation and

Samples

jQuery• No• Easy to Start

• Not that much• Lightweight• Complex

• No• Not Bad

Which one to use?

Ext JS• Complex UI• Lots of Windows and

Section• Desktop Like• Admin Web App• Don’t want to use any

server side scripting language or HTML

jQuery• Need to work with HTML

you define• Already have running

application and only need some DOM manipulation

• Need to some AJAX/JS tweaking to an existing UI

Can I use both?

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 - Eventsvar 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

parentNodepreviousSiblingnextSiblingfirstChildlastChild

Ext.DomQueryExt.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.html

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

• 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/ap

p/feed-viewer/feed-viewer.html

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

ControllerExt.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')); }});

ViewExt.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); }});

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 application3. Set the controller variable declared in application

in init() function in conroller4. 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 Package

Data StoreExt.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 Samplehttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/desktop/desktop.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/feed-viewer/feed-viewer.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/calendar/index.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/live-search-grid.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/cell-editing.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/charts/BarRenderer.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/two-trees.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.htmlhttp://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/draw/Tiger.html

• 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

Technology