Download - TDC 2011 - Ext JS 4
![Page 1: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/1.jpg)
Aprimorando sua App com
Ext JS 4
Loiane Groner
![Page 2: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/2.jpg)
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?
![Page 3: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/3.jpg)
Mãos ao alto!
Conhece JQuery?
Conhece Ext JS?
Já trabalhou com Ext JS?
![Page 4: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/4.jpg)
Mas o que é esse tal de Ext JS?
![Page 6: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/6.jpg)
1milhão de desenvolvedores
RIA JS Framework
Melhores componentes UIdo mercado
![Page 7: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/7.jpg)
Puro HTML/Javascript
![Page 8: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/8.jpg)
Com Ext JSHOT!
![Page 9: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/9.jpg)
![Page 10: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/10.jpg)
Cross Browser
Não precisa ficar
esquentando a cabeça!
Funciona até no IEca 6!
![Page 11: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/11.jpg)
XMLou
JSON
![Page 12: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/12.jpg)
Fácil Integração
![Page 13: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/13.jpg)
E outros....
Pode integrar código!
![Page 14: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/14.jpg)
Orientado a Objetos
Ext.define('MyApp.CustomerPanel', { extend: 'Ext.panel.Panel', // etc.});
![Page 15: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/15.jpg)
Carregamento Dinâmico
Ext.Loader.setConfig({ enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.ux.RowExpander',]);
![Page 16: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/16.jpg)
Data Package
Model
Proxy
Store
Field
Validation
Association
SorterFilter
Grouper
Reader
Writer
![Page 17: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/17.jpg)
Model Fields
Ext.define('User', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ]});
![Page 18: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/18.jpg)
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/} ]});
![Page 19: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/19.jpg)
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
![Page 20: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/20.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 21: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/21.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')); }); }); }});
Dados Associados
![Page 22: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/22.jpg)
new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true});
Store
![Page 23: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/23.jpg)
new Ext.data.Store({ model: 'User', sorters: ['name', 'id'], filters: { property: 'name', value : 'Loiane' }, groupers: { property : 'age', direction: 'ASC' }});
![Page 24: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/24.jpg)
Proxy
AJAX REST
JSON-PLocal Storage(Memory &HTML 5)
![Page 25: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/25.jpg)
Componentes
![Page 26: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/26.jpg)
Grid
![Page 27: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/27.jpg)
Tree
![Page 28: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/28.jpg)
Form + Validação Nativa
![Page 29: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/29.jpg)
Data View
![Page 30: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/30.jpg)
Toolbar + Buttons
![Page 31: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/31.jpg)
Gerenciador de Layout
![Page 32: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/32.jpg)
Acessibilidade(ARIA)
![Page 33: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/33.jpg)
Desenhos
![Page 34: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/34.jpg)
Charts
![Page 35: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/35.jpg)
![Page 36: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/36.jpg)
![Page 37: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/37.jpg)
![Page 38: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/38.jpg)
![Page 39: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/39.jpg)
![Page 40: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/40.jpg)
![Page 41: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/41.jpg)
![Page 42: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/42.jpg)
![Page 43: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/43.jpg)
![Page 44: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/44.jpg)
TemasCSS 3:
Sass + Compass
![Page 45: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/45.jpg)
Arquitetura MVC
![Page 46: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/46.jpg)
Model
View Controller
![Page 47: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/47.jpg)
Show me the code!
![Page 48: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/48.jpg)
Código para Download
http://github.com/loiane/extjs4-tdc2011
![Page 49: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/49.jpg)
Licença
US$ 595 por Dev
![Page 50: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/50.jpg)
http://extjs4book.com
Livro:Ext JS 4: First Look
RAW - Julho 2011Lançamento: final 2011
![Page 51: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/51.jpg)
![Page 52: TDC 2011 - Ext JS 4](https://reader031.vdocuments.pub/reader031/viewer/2022013118/554b7464b4c90564168b5381/html5/thumbnails/52.jpg)
contato = {email: ‘[email protected]’,blogPtBr: ‘loiane.com’,blogIngles: ‘loianegroner.com’,twitter: ‘@loiane’,github: ‘loiane’
}
Obrigada!