In this article I will show you how to get data upon selecting a document – I will then demonstrate how we open a document from the grid.
EXTJS in XPages series
Here are links to all of the previous articles in this series
- EXTJS in XPages #7 – Doing an @Unique(@DbColumn) equivalent in the grid
- EXTJS in XPages #6 – remote sorting using the REST service
- EXTJS in XPages #5 – Infinite scroller
- EXTJS in XPages #4 – Adding a Pager
- EXTJS in XPages #3 – Creating a basic grid from a Custom Control
- EXTJS in XPages #2 – Basic Grid capabilities
- EXTJS in XPages #1 – Starting from scratch (the first grid)
Demonstration
The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xGridOpenDocument.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
Selection Model
The selection model for a grid is very easily retrieved using the dblclick event within the grid:
var selection = grid.getSelectionModel().getSelection(); var fieldValue = selection[0].data.fieldname
Listeners
To detect the double click event we have to add a listener to the grid. There are many listeners for the grid and more information on them can be found here in the Sencha help files
grid = Ext.create('Ext.grid.Panel', { listeners: { //listener config setting for the grid events HERE..................... } }
Getting the UNID
In out view we are going to add a new column docid – very simple @Text(@DocumentUniqueID) column formula. But this column is not going to be displayed in the view – it is going to be hidden.
We add the new column and add the “hidden: true” property to it in the grid so that it is not visible to the user. But this does mean that it is available to us programmatically.
{ text: 'docid', width: 10, dataIndex: 'docid', hidden: true },
(Note: the @UNID property is passed in by the REST service and *yes* we could use that instead of adding a new column – however I feel that this is easier to explain and does not require a discussion regarding the usage of a property of the REST service JSON array )
Opening the document
In our example grid we are simply going to open our document by getting the docid field from the hidden column and opening a window using a manually generated URL string
So all together or grid code now looks like this:
grid = Ext.create('Ext.grid.Panel', { renderTo: 'gridHere', frame: true, features: [filters], height: 400, title: 'Users', store: store, iconCls: 'icon-user', listeners: { //listener config setting for the grid itemdblclick: function(dataview, record, item, index, e) { console.log('dblClick Event') var selection = grid.getSelectionModel().getSelection() window.open('xPerson.xsp?action=readDocument&documentId='+selection[0].data.docid) } } }
As you can see from the example page this is simple, effective and completely poor as a user experience – but this article was about getting data from the grid – not about making a cool application 🙂
Conclusion
Programmatically accessing data in the grid is a very powerful technique when attempting to manipulate the EXTJS grids and insert them into your application.