Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Learning Ext JS_Fourth Edition

You're reading from   Learning Ext JS_Fourth Edition Create powerful web applications with the new and improved Ext JS 5 library

Arrow left icon
Product type Paperback
Published in Jul 2015
Publisher
ISBN-13 9781784394387
Length 452 pages
Edition 1st Edition
Tools
Arrow right icon
Authors (3):
Arrow left icon
Carlos A Mendez Segura Carlos A Mendez Segura
Author Profile Icon Carlos A Mendez Segura
Carlos A Mendez Segura
Crysfel Villa Crysfel Villa
Author Profile Icon Crysfel Villa
Crysfel Villa
Armando Gonzalez Armando Gonzalez
Author Profile Icon Armando Gonzalez
Armando Gonzalez
Arrow right icon
View More author details
Toc

Table of Contents (17) Chapters Close

Preface 1. An Introduction to Ext JS 5 2. The Core Concepts FREE CHAPTER 3. Components and Layouts 4. It's All about the Data 5. Buttons and Toolbars 6. Doing It with Forms 7. Give Me the Grid 8. DataViews and Templates 9. The Tree Panel 10. Architecture 11. The Look and Feel 12. Responsive Configurations and Tablet Support 13. From Drawing to Charting 14. Finishing the Application 15. What's Next? Index

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'
    }],
    store: myStore,
    renderTo: Ext.getBody()
  });
});

In this code, we created a grid that...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image