In this article I will demonstrate the ability to edit data within and EXTJS grid and have the changes saved directly to the domino database via the same REST service from whence they came.
I have to say a big thank you to Steve Zavocki who actually found my old failed attempt to make this work in my demo database. It was unblogged because I couldn’t get it to work – well that was in April, he asked some questions about it and I came back to it and with another 4 months of EXTJS experience under my belt I figured it out in no time. Without the prompting it might have sat there for another 4 months untouched.
EXTJS in XPages series
Here are links to all of the previous articles in this series
- EXTJS in XPages #13: Totaling your columns with a groupingSummary
- EXTJS in XPages #12 – Counting categories with Grouped columns
- EXTJS in XPages #11 – Grids with Locked Column(s)
- EXTJS in XPages #10 – Grid Row Expander plugin
- EXTJS in XPages #9 – Infinite scrolling rebooted and reborn – v4.2 BufferedRenderer
- EXTJS in XPages #8 – Selecting data from the grid and opening a document
- 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/xRESTCRUD.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
This is really where everything starts to come together and we begin to be able to create functionality customers have always been asking for. Being able to update the data in a view without having to:
- go to the view
- go into a document
- edit it
- change it
- save it
- go back to the view
The Row Editor plugin
The row editor plugin is very easy to add to your grid – you create the variable for the rowEditor (taken from the website example)
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});
and you add it to the grid in the same way as other plugins
var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'gridHere',
plugins: [rowEditing], // <----------
height: 400,
frame: true,
etc.....
and as simple as that you can now double click on a grid and edit the columns!
Making it communicate with the REST service
In this example I am using a store with a proxy type of REST. The EXTJS grid already understands this is a REST service and does most of the heavy lifting by itself. For more information on how a REST service works in Domino then check out Chris Toohey’s article
There is also more documentation on the XPages REST here http://www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-93YBTB
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Person',
proxy: {
pageParam: 'p', // <---important to add
type: 'rest', // <---- type of proxy is REST
url: 'xRestService.xsp/byFirstNameFlat2',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json' // <- data is written back in JSON format
}
}
});
As you can see it also defines the write format back to the REST service. When you click on the UPDATE button on the row editor a URL is generated and data is sent. It does this via a “PUT” request which only sends a small amount of data to the server.
Enabling a PUT request
By default PUT is not enabled on a Domino server and you can enable it by turning on domino data services on the server or by adding it to the allowed HTTP methods on the web site document in the Address Book
For more information on that check out this blog article by Michael Brownlee
Domino REST service
The REST service URL which generates the data looks like this
The REST service POST look like this
As you can see the UNID has been added to the URL after the byFirstNameFlat2/
The _dc= is a random number generated by the grid
It is important to note that the grid automatically adds a “page=1” parameter to the REST service call and for some reason I cannot fathom this makes the REST service fail!
byFirstNameFlat2?_dc=1375392340494&page=1&start=0&limit=25 —-> FAIL
so I added the pageParam to the store proxy config and told it to use “p” instead – “p=1” apparently means nothing to a REST service and we all carry on happily….
and the UNID comes from where exactly?
So the other thing the grid does is by default it assumes that you want to send back the “id” field to the REST service and appends the “id” field onto the end of it
byFirstNameFlat2
becomes
byFirstNameFlat2/66F3A5FE2B2A38CC85257B1B00254E6D
To do this I added the UNID as a field in the REST service and added that as a hidden column in the grid.
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: ['firstname', 'lastname', 'address', 'city', 'state', 'id']
});
columns: [{
header: 'id',
sortable: true,
dataIndex: 'id',
hidden: true
}, {
“id” is not the only field name which can be used as there is another proxy parameter called “idParam” similar to the pageParam which will allow you to name the “unid” field however you like – but the grid must know which field in the grid is the UNID and which it should throw back at the REST service
And that is pretty much it – you can download the sample database and take a look at the code for yourself.
If you want to get really fancy (and we will in the next blog article) you can also edit numbers/date fields and add validation as well to ensure that your users and not submitting rubbish back to the REST.
If you want to be uber secure as well there is always the querySaveDocument event on the REST service which you could also use to validate the incoming data.
Conclusion
In this article we have seen how we can easily edit data directly in the data grid and from that we can update our domino data with a tiny http post back to the server. This is good for your network traffic and fantastic for your user experience.
No XPage controls were harmed in the creation of this demonstration
Xomino 
Great stuff as allways Mark ! Thanks for sharing 🙂