PDA

View Full Version : JAVA <==> ExtJS communication with an EditorGridPanel



Cybero
9 Mar 2011, 11:59 PM
Hello,

I am creating a web application based on struts2 and extJS

The JSP with extJS must display data from a database in an editable grid.
After modifications in the grid, the JSP must return the content of the the grid to the server.

In the first part, no problem, in extJS I declared a proxy which call an action wich return JSON datas.
Theses JSON datas are used to build the grid.

I use the EditorGridPanel to make my editable grid and put a button at the end to submit the changes.
Here comes my problem...

I don't know how to code the button.
It must:
==> constuct JSON datas to send to se server
==> Send these datas to the server

Can somebody help me ?

Here is my js file:


Ext.onReady(function(){

Ext.QuickTips.init();

// shorthand alias
var fm = Ext.form;

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)

var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true,
menuDisabled: true
},
columns: [{
id: 'DateOuverture',
header: "Date d\'ouverture",
dataIndex: 'DateOuverture',
width: 120,
renderer: Ext.util.Format.dateRenderer('d-m-Y'),
editor: new fm.DateField({
format: 'd-m-Y',
allowBlank: false, blankText:'Ce champ est obligatoire'})
},{
id: 'HeureOuverture',
header: "Heure d\'ouverture",
dataIndex: 'HeureOuverture',
width: 120,
editor: new fm.TimeField({
format: 'H:i',
allowBlank: false, blankText:'Ce champ est obligatoire'})
},{
id: 'HeureFermeture',
header: "Heure de fermeture",
dataIndex: 'HeureFermeture',
width: 120,
editor: new fm.TimeField({
format: 'H:i',
allowBlank: false, blankText:'Ce champ est obligatoire'})
},{
id: 'Commentaire',
header: "Commentaire",
dataIndex: 'Commentaire',
width: 400,
editor: new fm.TextField()

}]
});

var proxy=new Ext.data.HttpProxy( {url:'readDataCalendrierTP.do'});
var reader=new Ext.data.JsonReader(
{
},[
{name: "DateOuverture", type: 'date', dateFormat: 'Y-m-d'},
{name: "HeureOuverture"}, //, type: 'date', dateFormat: 'H:i'},
{name: "HeureFermeture"}, //, type: 'date', dateFormat: 'H:i'},
{name: "Commentaire"}
]
)

var store=new Ext.data.Store( {
proxy:proxy,
reader:reader,
sortInfo: {field:'DateOuverture', direction:'ASC'}
});

store.load();

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'grid-calendrierTP',
width: 800,
height: 300,
enableColumnMove: false, // turn off column reorder drag drop
enableColumnResize: false, // turn off column resize for whole grid
autoExpandColumn: 'Commentaire', // column with this id will be expanded
// title: 'Calendrier des ouvertures TP',
// frame: true, // ???
clicksToEdit: 2,
tbar: [{
text: 'Ajouter une donn&eacute;e',
handler : function(){
// access the Record constructor through the grid's store
var CalTP = grid.getStore().recordType;
var p = new CalTP({
DateOuverture: '',
HeureOuverture: '',
HeureFermeture: '',
Commentaire: ''
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}],
buttons: [{
text: 'Update',
handler: function() {
alert("Here is the missing code...");
}
}]

});
});

The submit button is at the bottom

I don't know how to do that... please help :-?

Cybero
10 Mar 2011, 12:13 AM
Ok... with the following code I create json datas:


buttons: [{
text: 'Mettre &agrave; jour',
handler: function() {
var updated_data = new Array();
ds = grid.store;
var recordCount =ds.getTotalCount();
rows = ds.getRange(0,recordCount);
for (x=0; x < recordCount; x++)
{
updated_data[x] = rows[x].data;
}
json_data = Ext.encode(updated_data);
alert(json_data);
}

But still one question: How to call the server page ?