EXTJS in XPages #2 – Basic Grid capabilities

In this article I will demonstrate the basic out of the box functionality which comes with each grid and will focus on the capabilities of each column.

Introduction

In the previous article I demonstrated how to add a basic grid to your XPage using the EXTJS grid control and the ExtLib REST service. What we will look at in this article is the basic capabilities of the view columns.

Re-sizing columns

If you mouse over a column separator at the top you will see a familiar icon – clicking on the separator you can drag and drop the column increasing and decreasing the size

ext11 ext12 ext13

Re-ordering of columns

If you click on a column and “drag it” over to the left and right you can re-order them.

ext21

ext22

ext23

Hiding columns

If you mouse over the top right of a column you will see a drop down icon appear – click on it and you will be able to hide one of the columns. You can actually programmatically hide the columns when the grids open and have the users make them visible later if you want to.

ext25

ext26

Sorting Columns

If you click on the column header – or click on the small drop down and select to order the column you can do that

ext24

Filtering Columns

Well ok this is not a BASIC feature of the grid as it is added as another required library – but I figured I would show it cos it is COOL and should be a basic premise of the grids you create. Code will be provided in a later article but for now just know that it can be done locally (filtering the grid contents) and remotely (asking the server for a filtered results set) and it is in the basic demo site


ext6ext7ext8

Demonstration

Go look at the basic demo site and see for yourself.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s