Aprimorando sua Aplicação com Ext JS 4

Loiane Gronerhttp://loiane.comhttp://loianegroner.comme@loiane.com

BrazilJS

palestrante = {nome: ‘Loiane Groner’,trabalha: ‘Senior Software Engineer’,onde: ‘@Citibank - São Paulo’,usaExtDesde: 2009,twitter: ‘@loiane’

}

Loiane...

Mãos ao alto!

Conhece JQuery?

Conhece Ext JS?

Já trabalhou com Ext JS?

http://sencha.com

Ext JSé

líndio!

1milhão de desenvolvedores

RIA JS Framework

Melhores componentes UI domercado

Puro HTML/Javascript Com Ext JS

HOT!

XMLou

JSON

Tem para

todos

Cross Browser

Não precisa ficar

esquentando a cabeça!

Funciona até no IEca 6!

Ext 3->

Ext 4

Framework rewritten

Performance++

Faster++

Stable++

E outros....

Plus:

*New Class System*New Data Package*New Charts*New Theming: CSS3*New Architecture: MVC

The New Class System

// Ext 3:Ext.ns('MyApp'); // required in Ext 3MyApp.CustomerPanel = Ext.extend(Ext.Panel, { // etc.});

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

Class Definition

Ext.define('Sample.Musician', { extend: 'Sample.Person',

mixins: { guitar: 'Sample.ability.CanPlayGuitar', compose: 'Sample.ability.CanComposeSongs', sing: 'Sample.ability.CanSing' }});

Mixins

 Ext.define('Sample.ability.CanPlayGuitar', { playGuitar: function() { //code to play }}); 

Mixin Definition

Ext.require('Ext.Window', function() { new Ext.Window({ title : 'Loaded Dynamically!', width : 200, height: 100 }).show();});

Dynamic Loading

Ext.define('Ext.Window', { extend: 'Ext.Panel', requires: " " " " " ['Ext.util.MixedCollection'], mixins: { draggable: 'Ext.util.Draggable' }});

Dynamic Loading Hierarchy

The New Data Package

Ext.regModel('User', { fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ]});

Model Declaration

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

New Store Declaration

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

Store Features

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

Associations

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

Loading Nested Data

{ 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

Ext.regModel('User', { 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/} ]});

Model Validation

Charts

MVCArchitecture

Hands On!!!

Código para Download:

https://github.com/loiane/ext4-crud-mvc

Book:Ext JS 4: First Look!!!

Coming: 2011

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

}