Fredric Berling
13 Jun 2008, 5:46 AM
I have been testing getting grid data using Dominos new parameter for JSON. Its quite nice and suits well for lots of things. especially small amounts of documents or responses in "embedded view" type fashoin.
You will reqognice most of the code from a previous post about jsonreader but here we go.
NOTE!! outputformat=JSON is only available in Domino 7.02 and above. but then..Who wouldnt upgrade to at least 7.02 anyway..right?!! :)
NOTE 2!! outputformat=JSON can be combined with the usual parameters fro readviewentries
Simple form with Ext initializing in HTMLHead and some passthrue HTML in body. nothing else
<div style="margin-left:100px;margin-top:50px">
<div id="file-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 400px; height: 300px;"></div>
</div>
Create a View named "testjson" with a single column populated with a text describing the document.
Here is the code from the forms onLoad event
// JavaScript Document
var jsonReader;
var myDataStore;
Ext.onReady(function()
{
jsonReader = new Ext.data.JsonReader({
root: 'viewentry',
totalProperty: '@toplevelentries',
id: 'id',
fields: [{name:'@position', type:'int'},{name:'unid', mapping:'@unid'},{name: 'description', mapping: 'entrydata[0].text[0]'}]
});
myDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'testjson?ReadViewEntries&outputformat=JSON',
method: 'POST'
}),
reader: jsonReader,
autoLoad: true,
remoteSort: false
});
function renderTitle(value, p, record) {
return String.format('<a href="#" onClick="javascript:AddProperty({1})">{0}</a>',
value, record.data.unid);
}
function renderBold(value) {
return '<B>'+ value + '</B>';
}
var colModel = new Ext.grid.ColumnModel( [
{header: "id", width: 100, sortable:'true', resizable: false, renderer:renderBold,dataIndex: '@position'},
{header: "name", width: 220, resizable: false, dataIndex: 'unid'},
{header: "Descripion", width: 220, resizable: false, renderer:renderTitle, dataIndex: 'description'}
]);
var grid = new Ext.grid.GridPanel({
renderTo:'file-grid',
store:myDataStore,
colModel:colModel,
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
width:600,
height:300,
frame:true,
title:'Test',
iconCls:'icon-grid'
});
grid.render();
grid.on('rowdblclick', function(){
var selection = grid.getSelectionModel().getSelected();
alert(selection.data.description);
});
})
Personally i find the renderer stuff especially awesome, and that you have the complete record in the "record" variable. And also later in the "selection" variable gotten from "grid.getSelectionModel().getSelected();" .. SO USEFUL!!
The "mapping" config in the jsonreader field section are very useful for extracting the correct column from the entrydata array, but still be able to use a readable variable name for the column.
Its possible this way is faster compared to getting the data using an agent and when it comes to encoding and strange character sets i beleive we can run into trouble by forcing the charset like we do in the agent variant. The outputformat=JSON has all possibilities to deal with this in the appropriate way since its built in.
I hope more Ext newbies find this example valuable.
You will reqognice most of the code from a previous post about jsonreader but here we go.
NOTE!! outputformat=JSON is only available in Domino 7.02 and above. but then..Who wouldnt upgrade to at least 7.02 anyway..right?!! :)
NOTE 2!! outputformat=JSON can be combined with the usual parameters fro readviewentries
Simple form with Ext initializing in HTMLHead and some passthrue HTML in body. nothing else
<div style="margin-left:100px;margin-top:50px">
<div id="file-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 400px; height: 300px;"></div>
</div>
Create a View named "testjson" with a single column populated with a text describing the document.
Here is the code from the forms onLoad event
// JavaScript Document
var jsonReader;
var myDataStore;
Ext.onReady(function()
{
jsonReader = new Ext.data.JsonReader({
root: 'viewentry',
totalProperty: '@toplevelentries',
id: 'id',
fields: [{name:'@position', type:'int'},{name:'unid', mapping:'@unid'},{name: 'description', mapping: 'entrydata[0].text[0]'}]
});
myDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'testjson?ReadViewEntries&outputformat=JSON',
method: 'POST'
}),
reader: jsonReader,
autoLoad: true,
remoteSort: false
});
function renderTitle(value, p, record) {
return String.format('<a href="#" onClick="javascript:AddProperty({1})">{0}</a>',
value, record.data.unid);
}
function renderBold(value) {
return '<B>'+ value + '</B>';
}
var colModel = new Ext.grid.ColumnModel( [
{header: "id", width: 100, sortable:'true', resizable: false, renderer:renderBold,dataIndex: '@position'},
{header: "name", width: 220, resizable: false, dataIndex: 'unid'},
{header: "Descripion", width: 220, resizable: false, renderer:renderTitle, dataIndex: 'description'}
]);
var grid = new Ext.grid.GridPanel({
renderTo:'file-grid',
store:myDataStore,
colModel:colModel,
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
width:600,
height:300,
frame:true,
title:'Test',
iconCls:'icon-grid'
});
grid.render();
grid.on('rowdblclick', function(){
var selection = grid.getSelectionModel().getSelected();
alert(selection.data.description);
});
})
Personally i find the renderer stuff especially awesome, and that you have the complete record in the "record" variable. And also later in the "selection" variable gotten from "grid.getSelectionModel().getSelected();" .. SO USEFUL!!
The "mapping" config in the jsonreader field section are very useful for extracting the correct column from the entrydata array, but still be able to use a readable variable name for the column.
Its possible this way is faster compared to getting the data using an agent and when it comes to encoding and strange character sets i beleive we can run into trouble by forcing the charset like we do in the agent variant. The outputformat=JSON has all possibilities to deal with this in the appropriate way since its built in.
I hope more Ext newbies find this example valuable.