aprimorando sua aplicação com ext js 4 - braziljs
DESCRIPTION
Apresentação feita no BrazilJS 2011, 13 de maio de 2011, em Fortaleza - Ceará sobre Ext JS 4TRANSCRIPT
Aprimorando sua Aplicação com Ext JS 4
Loiane Gronerhttp://loiane.comhttp://[email protected]
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?
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: ‘[email protected]’,blogPtBr: ‘loiane.com’,blogIngles: ‘loianegroner.com’,twitter: ‘@loiane’,github: ‘loiane’,slideshare: ‘loianeg’
}