Interface in your face

An Ext JS application created with Sencha Cmd will set up the main view as a viewport filling the entire browser window. We'll use this view and adapt it to our needs, as shown in the following code:

// app/view/main/Main.js Ext.define('Alcohology.view.main.Main', { extend: 'Ext.Panel', xtype: 'app-main', controller: 'main', viewModel: 'main', layout: 'border', header: { xtype: 'app-header' }, items: [ { xtype: 'categories', width: 200, region: 'west' }, { xtype: 'product-list', region: 'center' } ], initComponent: function() { this.callParent(arguments); this.add(Ext.create('Alcohology.view.cart.Cart', { reference: 'cartWindow' })); this.add(Ext.create('Alcohology.view.account.Account', { reference: 'accountWindow' })); ...

Get Ext JS Application Development Blueprints now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.