tdc 2011 - ext js 4

Aprimorando sua App com

Ext JS 4

Loiane Groner

palestrante = {nome: ‘Loiane Groner’,trabalha: ‘Sr Software Engineer’,onde: ‘@Citibank - São Paulo’,usaExtDesde: 2009,twitter: ‘@loiane’,escreve: ‘http://loiane.com’,escreveEN: ‘http://loianegroner.com’

}

Loiane Quem?

Mãos ao alto!

Conhece JQuery?

Conhece Ext JS?

Já trabalhou com Ext JS?

Mas o que é esse tal de Ext JS?

http://sencha.com

1milhão de desenvolvedores

RIA JS Framework

Melhores componentes UIdo mercado

Puro HTML/Javascript

Com Ext JSHOT!

Cross Browser

Não precisa ficar

esquentando a cabeça!

Funciona até no IEca 6!

XMLou

JSON

Fácil Integração

E outros....

Pode integrar código!

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

Model Validations

Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email', 'height'],  validations: [ {type: 'presence', field: 'id'}, {type: 'length', field: 'name', min: 2}, {type: 'format', field: 'email', matcher: /[a-z]@[a-z].com/} ]});

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: JSON

//loads User with ID 123 using User's ProxyUser.load(123, { success: function(user) { console.log("User: " + user.get('name'));  user.posts().each(function(post) { console.log("Comments for post: " + post.get('title'));  post.comments().each(function(comment) { console.log(comment.get('message')); }); }); }});

Dados Associados

new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true});

Store

new Ext.data.Store({ model: 'User',  sorters: ['name', 'id'], filters: { property: 'name', value : 'Loiane' }, groupers: { property : 'age', direction: 'ASC' }});

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:

Sass + Compass

Arquitetura MVC

Model

View Controller

Show me the code!

Código para Download

http://github.com/loiane/extjs4-tdc2011

Licença

US$ 595 por Dev

http://extjs4book.com

Livro:Ext JS 4: First Look

RAW - Julho 2011Lançamento: final 2011

contato = {email: ‘me@loiane.com’,blogPtBr: ‘loiane.com’,blogIngles: ‘loianegroner.com’,twitter: ‘@loiane’,github: ‘loiane’

}

Obrigada!