Curso ExtJS 4 - Aula 01 - Introdução

Slides da aula 01 do curso gratuito de Ext JS 4 - Introdução e overview do Ext JS 4 - http://loiane.com

1. Curso
Ext JS 4
Introdução Loiane Groner
http://loiane.com

2. Mas o que
é Ext JS?

3. http://sencha.com

4. 1milhão de desenvolvedores
RIA JS Framework
Melhores componentes UI
do mercado

6. Cross Browser
Não precisa
ficar
esquentando
a cabeça!
Funciona até
no IEca 6!

7. XML
ou
JSON

8. Fácil
Integração

9. Pode integrar código!

10. Ext JS 4
+
CoffeeScript?

11. Ext JS 4
+
NodeJS?

12. Recursos do
Framework

13. Orientado a Objetos
Ext.define('MyApp.CustomerPanel' , {
extend: 'Ext.panel.Panel',
// etc.
});

14. Carregamento
Dinâmico
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander' ,
]);

15. Data Package
Model
Proxy
Store
Field
Validation
Association
Sorter
Filter
Grouper
Reader
Writer

16. Model Fields
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});

17. 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

18. {
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

19. Proxy
AJAX REST
JSON-P
Local Storage
(Memory &
HTML 5)

20. Componentes

21. Grid

22. Tree

23. Form + Validação
Nativa

24. Data View

25. Toolbar +
Buttons

26. Gerenciador
de Layout

27. Acessibilidade
(ARIA)

28. Desenhos

29. Charts

39. Temas
CSS 3

40. Arquitetura MVC

41. Model
View Controller

42. Licença
US$ 595 por Dev

43. Ext JS Package

44. Foruns

45. http://www.sencha.com/
forum/
Oficial - Inglês

46. http://extjs.com.br/
Comunidade Brasileira!

48. contato = {
email: ‘[email protected]’,
blog: ‘loiane.com’,
facebook: ‘facebook.com/loianegroner’,
twitter: ‘@loiane’,
github: ‘loiane’
}
Obrigada!