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

1. Introdução Ext JS 4 Bruno Tavares

2. Ext JS 4

3. Desenvolvimento de Interfaces RIA Componentes, Widgets Integração com Dados Utilitários

7. Overview Componentes

8. Ext.panel.Panel

9. Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title : 'Hello', html : '<p>World!</p>', width : 200, renderTo: Ext.getBody() }); });

10. Ext.window.Window

11. Ext.create('Ext.window.Window', { title : 'Hello', height : 200, width : 400 }).show();

12. Ext.grid.Panel

13. Ext.create('Ext.grid.Panel', { title : 'Simpsons', height : 200, width : 400, renderTo: Ext.getBody(), store : Ext.data.StoreManager.lookup('simpsonsStore'), columns : [ { header: 'Name', dataIndex: 'name' }, { header: 'Email', dataIndex: 'email', flex: 1 }, { header: 'Phone', dataIndex: 'phone' } ] });

14. Layouts

15. Ext.create('Ext.window.Window', { title : 'Hello', height : 200, width : 400, layout : 'fit’, items : { xtype : 'grid', border : false, columns : [{header: 'World'}], store : Ext.create( 'Ext.data.ArrayStore', {} ) } }).show();

16. Ext.create('Ext.window.Window', { title : 'Simple Form', layout : 'anchor', defaultType : 'textfield', bodyPadding : 10, width : 350, height : 200, autoShow : true, renderTo : Ext.getBody(), items : [{ fieldLabel : 'First Name', name : 'first', anchor : '100%', allowBlank : false },{ fieldLabel : 'Last Name', name : 'last', anchor : '-50', allowBlank : false }] });

17. Ext.create('Ext.panel.Panel', { title : 'Column Layout', width : 350, height : 250, layout :'column', renderTo: Ext.getBody(), items : [{ title : 'Column 1', columnWidth : .25 },{ title : 'Column 2', columnWidth : .55 },{ title : 'Column 3', columnWidth : .20 }] });

18. Ext.create('Ext.panel.Panel', { width : 500, height : 400, title : 'Border Layout', layout : 'border', renderTo: Ext.getBody(), items : [{ title : 'West Region is collapsible', region : 'west', margins : '5 0 0 0', width : 200, collapsible : true, split : true },{ title : 'Center Region', region : 'center', margins : '5 0 0 0' }] });

19. Ext.container.Viewport

20. Ext.create('Ext.container.Viewport', { layout : 'border', items : [{ xtype : 'component', region : 'north', html : '<h1>Page Title</h1>', autoHeight : true }, { region : 'west', collapsible : true, title : 'Navigation', width : 150 },{ region : 'center', xtype : 'tabpanel', activeTab : 0, items : { title : 'Default Tab', html : 'The first tabapos;s content. ' } }] });

21. Exercícios Componentes: Viewport, Panel West, TabPanel Center, Grid Layouts: Border, Accordion

22. Eventos e Listeners

24. Oscomponentesmonitoramseuseventos e emitemavisosquandoestessãodisparados. Listeners sãoouvintes, queficam “pendurados” em um evento, esperandoeleserdisparadoparaexecutarem.

25. Ext.create('Ext.panel.Panel', { title : 'Hello', width : 200, height : 200, collapsible : true, renderTo : Ext.getBody(), listeners : { collapse: function(){ Ext.Msg.alert( 'Atenção!', 'Painel foi contraído!' ); } } });

26. grid.on('select', function(rowModel, record) { Ext.Msg.alert( 'Atenção', 'RegistroSelecionado: '+record.get('name')); ); });

27. Exercícios

28. Estrutura de Aplicação Organização Consistência Ferramentas de Build

29. App.js Ext.application({ name: 'AM', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' } ] }); } });

31. Controller Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', init: function() { console.log('Initialized Users! This happens before the Application launch function is called'); } });

32. Controller Ext.application({ ... controllers: [ 'Users' ], ... });

33. Controller Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', init: function() { this.control({ 'viewport > panel': { render: this.onPanelRendered } }); }, onPanelRendered: function() { console.log('The panel was rendered'); } });

34. Controller

35. View Ext.define('AM.view.user.List' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', title : 'All Users’, initComponent: function() { this.store= { ... }; this.columns= [ ... ]; this.callParent(arguments); } });

36. View Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', views: [ 'user.List' ], init: ... onPanelRendered: ... });

37. View Ext.application({ ... launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: { xtype: 'userlist' } }); } });

39. Model e Store Ext.define('AM.store.Users', { extend: 'Ext.data.Store', fields: ['name', 'email'], data: [ {name: 'Ed', email: 'ed@sencha.com'}, {name: 'Tommy', email: 'tommy@sencha.com'} ] });

40. Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', stores: [ 'Users' ], ... });

41. Ext.define('AM.view.user.List' ,{ extend: 'Ext.grid.Panel', alias : 'widget.userlist', store: 'Users', ... });

42. Ext.define('AM.model.User', { extend: 'Ext.data.Model', fields: ['name', 'email'] }); Ext.define('AM.controller.Users', { extend: 'Ext.app.Controller', stores: ['Users'], models: ['User'], ... }); Ext.define('AM.store.Users', { extend: 'Ext.data.Store', model: 'AM.model.User', data: [ {name: 'Ed', email: 'ed@sencha.com'}, {name: 'Tommy', email: 'tommy@sencha.com'} ] });

43. Exercício Montar a estrutura Ext JS 4 no exerício anterior