Curso ExtJS 4 - Aula 01 - Introdução
8 gostaram10,275 visualizações
Este documento apresenta um resumo sobre o framework JavaScript Ext JS. Em três frases ou menos, o documento descreve Ext JS como um framework RIA JS para construção de interfaces ricas na web, destaca que possui os melhores componentes de interface do mercado e funciona em todos os browsers, inclusive Internet Explorer 6.
![Carregamento
Dinâmico
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander',
]);](https://image.slidesharecdn.com/curso-extjs4-introducao-111125080523-phpapp01/85/Curso-ExtJS-4-Aula-01-Introducao-14-320.jpg)
![Model Fields
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});](https://image.slidesharecdn.com/curso-extjs4-introducao-111125080523-phpapp01/85/Curso-ExtJS-4-Aula-01-Introducao-16-320.jpg)
![Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name'],
Model
hasMany: 'Posts' Association
});
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'
});](https://image.slidesharecdn.com/curso-extjs4-introducao-111125080523-phpapp01/85/Curso-ExtJS-4-Aula-01-Introducao-17-320.jpg)
![{
id: 1
Nested
name: 'Loiane',
posts: [
{
Data
id : 12,
title: 'New features in Ext JS 4',
body : 'Ext JS 4 is the most...',
comments: [
{
id: 123,
name: 'Someone',
message: 'Great Post!'
}
]
}
]
}](https://image.slidesharecdn.com/curso-extjs4-introducao-111125080523-phpapp01/85/Curso-ExtJS-4-Aula-01-Introducao-18-320.jpg)
Curso ExtJS 4 - Aula 01 - Introdução
- 1. Curso Ext JS 4 Introdução Loiane Groner http://loiane.com
- 2. Mas o que é Ext JS?
- 4. 1milhão de desenvolvedores RIA JS Framework Melhores componentes UI do mercado
- 6. Cross Browser Funciona até no IEca 6! Não precisa ficar esquentando a cabeça!
- 7. XML ou JSON
- 10. Ext JS 4 + CoffeeScript?
- 11. Ext JS 4 + NodeJS?
- 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 Field Reader Validation Model Writer Association Proxy Store Sorter Grouper Filter
- 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'], Model hasMany: 'Posts' Association }); 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' });
- 18. { id: 1 Nested name: 'Loiane', posts: [ { Data id : 12, title: 'New features in Ext JS 4', body : 'Ext JS 4 is the most...', comments: [ { id: 123, name: 'Someone', message: 'Great Post!' } ] } ] }
- 19. Proxy AJAX REST Local Storage (Memory & JSON-P HTML 5)
- 20. Componentes
- 21. Grid
- 22. Tree
- 23. Form + Validação Nativa
- 24. Data View
- 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
- 48. contato = { email: ‘curso@extjs4.com’, blog: ‘loiane.com’, facebook: ‘facebook.com/loianegroner’, twitter: ‘@loiane’, github: ‘loiane’ } Obrigada!