Chapter 8. The grid panel
This chapter covers
- Learning about the grid panel
- Using existing column implementations
- Enabling grid panel pagination
- Creating an editable grid panel
- Implementing CRUD cycles using data stores
Since the early days of Ext JS the grid panel has been the centerpiece of the framework. In many respects this holds true today, and the grid panel is arguably one of the widgets with the most advanced functionality available in Ext JS, allowing for rapid data entry in a tabular form. When you use the grid panel, you gain the ability to visualize and manipulate large datasets in an intuitive way, so this class should fit into most enterprise and office applications. Note that the grid has seen a major overhaul of performance in Ext JS 4.1, and it’s now so fast that the list view from previous releases of Ext JS is no longer needed.
This chapter focuses on the grid panel and builds on what you learned about data stores in the previous chapter. You’ll start by constructing a grid panel that feeds from a store that reads local in-memory array data. After exploring the basics, you’ll move on to advanced features like paging and scrolling. Finally, you’ll learn how to edit and interact with data using the data store from the grid panel and the CRUD actions covered in the last chapter.
At each step of the process you’ll learn more about the grid panel and its supporting classes. But before we start, we’ll introduce you to the grid panel.