O'Reilly logo

Learning Ext JS - Fourth Edition by Armando Gonzalez, Crysfel Villa, Carlos A. Méndez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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' }], ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required