EXTJS in XPages #15 – Multi-select of documents

In this article I will discuss and highlight “multiselect” within the extjs grid. With a two line addition to the grid code we are able to select multiple documents and then action them.

EXTJS in XPages series
Here are links to all of the previous articles in this series

Demonstration
The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xBufferedRendererCheckBox.xsp

Download
The sample database that will accompany this series is available from the menu in the live demo database from this link – http://demo.xomino.com/xomino/Extjs.nsf

Introduction

To be able to action more than one document we want to be able to select more than one in the grid. There are two ways we can do this and we are going to look at both. In the next article we will look at how to affect change to multiple documents.

mul1

How does that work?

Within the grid configurations we are able to add a multiSelect  parameter which allows us to select multiple documents. This can be achieved in the same way as you would multiselect in excel:

  • Hold down the SHIFT key and click two documents, Everything inbetween will be selected as well as the two documents clicked
  • Hold down the CTRL key and the documents clicked will be selected in addition to each other
  • Single clicking any other document without either key held down will only select the document clicked

mul2

  var grid = Ext.create('Ext.grid.Panel', {
        renderTo: 'gridHere',
        frame: true,
        multiSelect: true,     // <-----------
        height: 400,
        title: 'Users',
	    plugins: buffRend,

As you can see from the above picture the multiple selected documents are all highlighted.

Going one step further (if the users prefer it) you can add a “checkboxmodel” parameter to add “checkboxes” to the grid

  var grid = Ext.create('Ext.grid.Panel', {
        renderTo: 'gridHere',
        frame: true,
        multiSelect: true,     // <-----------
        selType: 'checkboxmodel',  //<----------------
        height: 400,
        title: 'Users',
	    plugins: buffRend,

Not only does this give a new interface it also allows users to select and deselect all by clicking on the checkbox at the top of the grid

mul3

Conclusion

Adding multi-select support to the grid is very simple and in the next article we will look at how to take action on that

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