Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
-
Upload
loiane-groner -
Category
Technology
-
view
5.035 -
download
3
description
Transcript of Aprimorando sua Aplicação com Ext JS 4 - BrazilJS
![Page 1: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/1.jpg)
Aprimorando sua Aplicação com Ext JS 4
Loiane Gronerhttp://loiane.comhttp://[email protected]
BrazilJS
![Page 2: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/2.jpg)
palestrante = {nome: ‘Loiane Groner’,trabalha: ‘Senior Software Engineer’,onde: ‘@Citibank - São Paulo’,usaExtDesde: 2009,twitter: ‘@loiane’
}
Loiane...
![Page 3: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/3.jpg)
Mãos ao alto!
Conhece JQuery?
Conhece Ext JS?
Já trabalhou com Ext JS?
![Page 5: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/5.jpg)
Ext JSé
líndio!
![Page 6: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/6.jpg)
1milhão de desenvolvedores
RIA JS Framework
Melhores componentes UI domercado
![Page 7: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/7.jpg)
Puro HTML/Javascript Com Ext JS
HOT!
![Page 8: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/8.jpg)
![Page 9: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/9.jpg)
XMLou
JSON
![Page 10: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/10.jpg)
Tem para
todos
![Page 11: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/11.jpg)
Cross Browser
Não precisa ficar
esquentando a cabeça!
Funciona até no IEca 6!
![Page 12: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/12.jpg)
Ext 3->
Ext 4
![Page 13: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/13.jpg)
Framework rewritten
![Page 14: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/14.jpg)
Performance++
![Page 15: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/15.jpg)
Faster++
![Page 16: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/16.jpg)
Stable++
![Page 17: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/17.jpg)
E outros....
![Page 18: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/18.jpg)
Plus:
*New Class System*New Data Package*New Charts*New Theming: CSS3*New Architecture: MVC
![Page 19: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/19.jpg)
The New Class System
![Page 20: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/20.jpg)
![Page 21: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/21.jpg)
// 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
![Page 22: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/22.jpg)
Ext.define('Sample.Musician', { extend: 'Sample.Person',
mixins: { guitar: 'Sample.ability.CanPlayGuitar', compose: 'Sample.ability.CanComposeSongs', sing: 'Sample.ability.CanSing' }});
Mixins
![Page 23: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/23.jpg)
Ext.define('Sample.ability.CanPlayGuitar', { playGuitar: function() { //code to play }});
Mixin Definition
![Page 24: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/24.jpg)
Ext.require('Ext.Window', function() { new Ext.Window({ title : 'Loaded Dynamically!', width : 200, height: 100 }).show();});
Dynamic Loading
![Page 25: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/25.jpg)
Ext.define('Ext.Window', { extend: 'Ext.Panel', requires: " " " " " ['Ext.util.MixedCollection'], mixins: { draggable: 'Ext.util.Draggable' }});
Dynamic Loading Hierarchy
![Page 26: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/26.jpg)
The New Data Package
![Page 27: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/27.jpg)
![Page 28: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/28.jpg)
![Page 29: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/29.jpg)
Ext.regModel('User', { fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ]});
Model Declaration
![Page 30: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/30.jpg)
new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true});
New Store Declaration
![Page 31: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/31.jpg)
new Ext.data.Store({ model: 'User', sorters: ['name', 'id'], filters: { property: 'name', value : 'Loiane' }, groupers: { property : 'age', direction: 'ASC' }});
Store Features
![Page 32: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/32.jpg)
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
![Page 33: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/33.jpg)
//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
![Page 34: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/34.jpg)
{ 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
![Page 35: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/35.jpg)
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
![Page 36: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/36.jpg)
Charts
![Page 37: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/37.jpg)
![Page 38: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/38.jpg)
MVCArchitecture
![Page 39: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/39.jpg)
Hands On!!!
![Page 40: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/40.jpg)
Código para Download:
https://github.com/loiane/ext4-crud-mvc
![Page 41: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/41.jpg)
Book:Ext JS 4: First Look!!!
Coming: 2011
![Page 42: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/42.jpg)
![Page 43: Aprimorando sua Aplicação com Ext JS 4 - BrazilJS](https://reader034.fdocuments.net/reader034/viewer/2022042521/554b7468b4c90564168b5384/html5/thumbnails/43.jpg)
contato = {email: ‘[email protected]’,blogPtBr: ‘loiane.com’,blogIngles: ‘loianegroner.com’,twitter: ‘@loiane’,github: ‘loiane’,slideshare: ‘loianeg’
}