Introdução ext js 413. 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' } ] }); 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' }] }); 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. ' } }] }); 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!' ); } } }); 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' } ] }); } }); 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'); } }); 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); } }); 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'} ] }); 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'} ] });