Book Image

Learning Ext JS

By : Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades
Book Image

Learning Ext JS

By: Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

Overview of this book

<p>As more and more of our work is done through a web browser, and more businesses build web rather than desktop applications, users want web applications that look and feel like desktop applications. Ext JS is a JavaScript library that makes it (relatively) easy to create desktop-style user interfaces in a web application, including multiple windows, toolbars, drop-down menus, dialog boxes, and much more. Both Commercial and Open Source licenses are available for Ext JS.<br /><br />Ext JS has the unique advantage of being the only client-side UI library that also works as an application development library. Learning Ext JS will help you create rich, dynamic, and AJAX-enabled web applications that look good and perform beyond the expectations of your users.<br /><br />From the building blocks of the application layout, to complex dynamic Grids and Forms, this book will guide you through the basics of using Ext JS, giving you the knowledge required to create rich user experiences beyond typical web interfaces. It will also provide you with the tools you need to use AJAX, by consuming server-side data directly into the many interfaces of the Ext JS component library.</p>
Table of Contents (16 chapters)
15
Index

Displaying structured data with a GridPanel

Displaying data in a grid requires two Ext components:

  • A store that acts like an in-memory database, keeping track of the data we want to display
  • A grid panel that provides a way to display the data stored in a data store

Before we start to create each of these, let's look at some of the terminology that will be used, because this can be confusing at first:

  • Columns: This refers to a whole column of data, and would contain information only relevant to the display of data down through the entire column, including the heading. In Ext JS, this information is part of the Column Model.
  • Fields: This also refers to an entire column of data, but is refers to the actual data values. With Ext JS, this is used in the reader, for loading data.

Setting up a data store

The first thing we need to do is set up our data, which will be placed into a data store. The data store types available in Ext give us a consistent way of reading different data formats such...