Introdução ext js 4

1,301 views

Published on

Início no framework Ext JS 4, com visão geral dos componentes, gerenciadores de layouts, eventos e listeners, e mais.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,301
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introdução ext js 4

  1. 1. Introdução Ext JS 4<br />Bruno Tavares<br />
  2. 2. Ext JS 4<br />
  3. 3. Desenvolvimento de Interfaces RIA<br />Componentes, Widgets<br />Integração com Dados<br />Utilitários<br />
  4. 4.
  5. 5.
  6. 6.
  7. 7. Overview Componentes<br />
  8. 8. Ext.panel.Panel<br />
  9. 9. Ext.onReady(function()<br />{<br />Ext.create('Ext.panel.Panel', {<br />title : 'Hello',<br /> html : '<p>World!</p>',<br /> width : 200,<br /> renderTo: Ext.getBody()<br /> });<br />});<br />
  10. 10. Ext.window.Window<br />
  11. 11. Ext.create('Ext.window.Window', {<br />title : 'Hello',<br /> height : 200,<br /> width : 400<br />}).show();<br />
  12. 12. Ext.grid.Panel<br />
  13. 13. Ext.create('Ext.grid.Panel', {<br />title : 'Simpsons',<br /> height : 200,<br /> width : 400,<br /> renderTo: Ext.getBody(),<br /> store : Ext.data.StoreManager.lookup('simpsonsStore'),<br /> columns : [<br /> { header: 'Name', dataIndex: 'name' },<br />{ header: 'Email', dataIndex: 'email', flex: 1 },<br />{ header: 'Phone', dataIndex: 'phone' }<br /> ]<br />});<br />
  14. 14. Layouts<br />
  15. 15. Ext.create('Ext.window.Window', {<br />title : 'Hello',<br /> height : 200,<br /> width : 400,<br /> layout : 'fit’,<br /> items : {<br />xtype : 'grid',<br /> border : false,<br /> columns : [{header: 'World'}],<br /> store : Ext.create(<br />'Ext.data.ArrayStore', {}<br /> )<br /> }<br />}).show();<br />
  16. 16. Ext.create('Ext.window.Window', {<br /> title : 'Simple Form',<br />layout : 'anchor',<br />defaultType : 'textfield',<br />bodyPadding : 10,<br /> width : 350,<br /> height : 200,<br />autoShow : true,<br /> renderTo : Ext.getBody(),<br /> items : [{<br />fieldLabel : 'First Name',<br /> name : 'first',<br /> anchor : '100%',<br />allowBlank : false<br /> },{<br />fieldLabel : 'Last Name',<br /> name : 'last',<br /> anchor : '-50',<br />allowBlank : false<br /> }]<br />});<br />
  17. 17. Ext.create('Ext.panel.Panel', {<br /> title : 'Column Layout',<br /> width : 350,<br /> height : 250,<br /> layout :'column',<br /> renderTo: Ext.getBody(),<br /> items : [{<br />title : 'Column 1',<br />columnWidth : .25<br /> },{<br />title : 'Column 2',<br />columnWidth : .55<br /> },{<br />title : 'Column 3',<br />columnWidth : .20<br /> }]<br />});<br />
  18. 18. Ext.create('Ext.panel.Panel', {<br /> width : 500,<br /> height : 400,<br /> title : 'Border Layout',<br /> layout : 'border',<br /> renderTo: Ext.getBody(),<br /> items : [{<br /> title : 'West Region is collapsible',<br /> region : 'west',<br /> margins : '5 0 0 0',<br /> width : 200,<br /> collapsible : true,<br /> split : true<br /> },{<br /> title : 'Center Region',<br />region : 'center',<br /> margins : '5 0 0 0'<br /> }]<br />});<br />
  19. 19. Ext.container.Viewport<br />
  20. 20. Ext.create('Ext.container.Viewport', {<br /> layout : 'border',<br /> items : [{<br />xtype : 'component',<br /> region : 'north',<br /> html : '<h1>Page Title</h1>',<br />autoHeight : true<br /> }, {<br /> region : 'west',<br /> collapsible : true,<br />title : 'Navigation',<br /> width : 150<br /> },{<br />region : 'center',<br />xtype : 'tabpanel',<br />activeTab : 0,<br /> items : {<br />title : 'Default Tab',<br /> html : 'The first tab's content. '<br /> }<br /> }]<br />});<br />
  21. 21. Exercícios<br />Componentes: Viewport, Panel West, TabPanel Center, Grid<br />Layouts: Border, Accordion<br />
  22. 22. Eventos e Listeners<br />
  23. 23.
  24. 24. Oscomponentesmonitoramseuseventos e emitemavisosquandoestessãodisparados.<br />Listeners sãoouvintes, queficam “pendurados” em um evento, esperandoeleserdisparadoparaexecutarem.<br />
  25. 25. Ext.create('Ext.panel.Panel', {<br />title : 'Hello',<br /> width : 200,<br /> height : 200,<br /> collapsible : true,<br /> renderTo : Ext.getBody(),<br />listeners : {<br />collapse: function(){<br />Ext.Msg.alert(<br />'Atenção!', <br />'Painel foi contraído!'<br /> );<br /> }<br /> }<br />});<br />
  26. 26. grid.on('select', function(rowModel, record)<br />{<br />Ext.Msg.alert(<br />'Atenção',<br />'RegistroSelecionado: '+record.get('name'));<br /> );<br />});<br />
  27. 27. Exercícios<br />
  28. 28. Estrutura de Aplicação<br />Organização<br />Consistência<br />Ferramentas de Build<br />
  29. 29. App.js<br />Ext.application({<br />name: 'AM',<br />appFolder: 'app',<br />launch: function() {<br />Ext.create('Ext.container.Viewport', {<br />layout: 'fit',<br />items: [<br /> {<br />xtype: 'panel',<br />title: 'Users',<br /> html : 'List of users will go here'<br /> }<br /> ]<br /> });<br /> }<br />});<br />
  30. 30.
  31. 31. Controller<br />Ext.define('AM.controller.Users', {<br />extend: 'Ext.app.Controller',<br />init: function() {<br />console.log('Initialized Users! This happens before the Application launch function is called');<br /> }<br />});<br />
  32. 32. Controller<br />Ext.application({<br /> ...<br /> controllers: [<br />'Users'<br /> ],<br /> ...<br />});<br />
  33. 33. Controller<br />Ext.define('AM.controller.Users', {<br />extend: 'Ext.app.Controller',<br />init: function() {<br />this.control({<br />'viewport > panel': {<br /> render: this.onPanelRendered<br /> }<br /> });<br /> },<br />onPanelRendered: function() {<br />console.log('The panel was rendered');<br /> }<br />});<br />
  34. 34. Controller<br />
  35. 35. View<br />Ext.define('AM.view.user.List' ,{<br />extend: 'Ext.grid.Panel',<br /> alias : 'widget.userlist',<br />title : 'All Users’,<br />initComponent: function() {<br />this.store= {<br /> ... <br /> };<br />this.columns= [<br />...<br /> ];<br />this.callParent(arguments);<br /> }<br />});<br />
  36. 36. View<br />Ext.define('AM.controller.Users', {<br />extend: 'Ext.app.Controller',<br />views: [<br />'user.List'<br /> ],<br />init: ...<br />onPanelRendered: ...<br />});<br />
  37. 37. View<br />Ext.application({<br /> ...<br />launch: function() {<br />Ext.create('Ext.container.Viewport', {<br />layout: 'fit',<br />items: {<br />xtype: 'userlist'<br /> }<br /> });<br /> }<br />});<br />
  38. 38.
  39. 39. Model e Store<br />Ext.define('AM.store.Users', {<br /> extend: 'Ext.data.Store',<br />fields: ['name', 'email'],<br /> data: [<br /> {name: 'Ed', email: 'ed@sencha.com'},<br /> {name: 'Tommy', email: 'tommy@sencha.com'}<br /> ]<br />});<br />
  40. 40. Ext.define('AM.controller.Users', {<br />extend: 'Ext.app.Controller',<br /> stores: [<br />'Users'<br /> ],<br /> ...<br />});<br />
  41. 41. Ext.define('AM.view.user.List' ,{<br />extend: 'Ext.grid.Panel',<br /> alias : 'widget.userlist',<br /> store: 'Users',<br /> ...<br />});<br />
  42. 42. Ext.define('AM.model.User', {<br /> extend: 'Ext.data.Model',<br />fields: ['name', 'email']<br />});<br />Ext.define('AM.controller.Users', {<br />extend: 'Ext.app.Controller',<br /> stores: ['Users'],<br />models: ['User'],<br /> ...<br />});<br />Ext.define('AM.store.Users', {<br /> extend: 'Ext.data.Store',<br /> model: 'AM.model.User',<br /> data: [<br /> {name: 'Ed', email: 'ed@sencha.com'},<br /> {name: 'Tommy', email: 'tommy@sencha.com'}<br /> ]<br />});<br />
  43. 43. Exercício<br />Montar a estrutura Ext JS 4 no exerício anterior<br />

×