A basic grid

Once we have defined our data package (model and store), we are ready to create our first grid. In this example, we are going to create the customers grid, as shown in the following code:

Ext.onReady(function(){ var myStore = Ext.create("Myapp.store.customers.Customers"); var myGrid = Ext.create('Ext.grid.Panel',{ height: 250, width: 800, title: 'My customers', columns: [{ width: 70, dataIndex: 'id',// *** model field name text: 'Id' },{ width: 160, dataIndex: 'name', //*** text: 'Customer name' },{ width: 110, dataIndex: 'phone',//*** text: 'Phone' },{ width: 160, dataIndex: 'website',//*** text: 'Website' },{ width: 80, dataIndex: 'status',//*** text: 'Status' },{ width: 160, dataIndex: 'clientSince',//*** text: 'Client Since' }], ...

Get Learning Ext JS - Fourth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.