CursoExt JS 4

IntroduçãoLoiane Groner

http://loiane.com

Mas o que é Ext JS?

http://sencha.com

1milhão de desenvolvedores

RIA JS Framework

Melhores componentes UIdo mercado

Cross Browser

Não precisa ficar

esquentando a cabeça!

Funciona até no IEca 6!

XMLou

JSON

Fácil Integração

Pode integrar código!

Ext JS 4+

CoffeeScript?

Ext JS 4+

NodeJS?

Recursos do Framework

Orientado a Objetos

Ext.define('MyApp.CustomerPanel', { extend: 'Ext.panel.Panel', // etc.});

Carregamento Dinâmico

Ext.Loader.setConfig({ enabled: true});

Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.ux.RowExpander',]);

Data Package

Model

Proxy

Store

Field

Validation

Association

SorterFilter

Grouper

Reader

Writer

Model Fields

Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ]});

Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name'],  hasMany: 'Posts'}); Ext.define('Post', { extend: 'Ext.data.Model', fields: ['id', 'user_id', 'title', 'body'],  belongsTo: 'User', hasMany: 'Comments'}); Ext.define('Comment', { extend: 'Ext.data.Model', fields: ['id', 'post_id', 'name', 'message'],  belongsTo: 'Post'});

Model Association

{ id: 1 name: 'Loiane', posts: [ { id : 12, title: 'New features in Ext JS 4', body : 'Ext JS 4 is the most...', comments: [ { id: 123, name: 'Someone', message: 'Great Post!' } ] } ]}

Nested Data

Proxy

AJAX REST

JSON-PLocal Storage(Memory &HTML 5)

Componentes

Grid

Tree

Form + Validação Nativa

Data View

Toolbar + Buttons

Gerenciador de Layout

Acessibilidade(ARIA)

Desenhos

Charts

TemasCSS 3

Arquitetura MVC

Model

View Controller

Licença

US$ 595 por Dev

Ext JS Package

Foruns

http://www.sencha.com/forum/

Oficial - Inglês

http://extjs.com.br/

Comunidade Brasileira!

contato = {email: ‘curso@extjs4.com’,blog: ‘loiane.com’,facebook: ‘facebook.com/loianegroner’,twitter: ‘@loiane’,github: ‘loiane’

}

Obrigada!