PDA

View Full Version : Complex EditorGrid with two columns edited via remote ComboBox



F.o.b.
31 Aug 2009, 4:29 AM
I'm trying to define an editable grid based on a database table that keep the M:M relation between 2 tables (uesers and applications) ..

my table is user_application: 2 columns with id_operatore and id_webapp.

I want to create an editablegrid with 2 combo (remote loaded) to manage the associations.

this my actual code:

Store


var storeOperatoriWebApp = new Ext.data.JsonStore({
autoDestroy: true,
root: 'associazioni',
remoteSort: true,
fields: [
'id_operatore',
'id_webapp',
],
proxy: new Ext.data.HttpProxy({
url: 'url-to-database-query.php',
method: 'GET'
})
});

storeOperatoriWebApp.setDefaultSort('id_operatore','asc');


2 editors


var idoperatore_editor = {
xtype: 'combo',
triggerAction: 'all',
valueField: 'id',
displayField: 'denominazione',
store: {
xtype: 'jsonstore',
root: 'operatori',
fields: ['id','denominazione'],
proxy: new Ext.data.HttpProxy({
url: 'url-to-users-select.php',
method: 'GET',
params: {
action: 'select',
table: 'ch_operatori',
root: 'operatori',
sort: 'cognome',
dir: 'asc'
}
})
}
}

var idwebapp_editor = {
xtype: 'combo',
triggerAction: 'all',
valueField: 'id',
displayField: 'descrizione',
store: {
xtype: 'jsonstore',
root: 'applicazioni',
fields: ['id','descrizione'],
proxy: new Ext.data.HttpProxy({
url: 'url-to-webapp-query.php,
method: 'GET',
params: {
action: 'select',
table: 'ch_webapp',
root: 'applicazioni',
sort: 'descrizione',
dir: 'asc'
}
})
}
}


My Grid


var gridOperatoriWebApp = new Ext.grid.EditorGridPanel({
title: 'Tabella: ch_operatori_webapp',
autoHeight: true,
stripeRows: true,
border: false,
frame: false,
loadMask : {msg:"Attendere! Caricamento in corso ..."},
autoExpandColumn: 'id_webapp',
viewConfig: {forceFit:true},
clicksToEdit: 1,
store: storeOperatoriWebApp,
columns: [
{header:"Operatore", dataIndex: 'id_operatore', sortable: true, editor: idoperatore_editor},
{header:"Applicazione Web", dataIndex: 'id_webapp', editor: idwebapp_editor}
],
listeners: {
afteredit: function(e){
var conn = new Ext.data.Connection();
console.log(e.record);
conn.request({
url: 'url-to-perform-changes.php',
method: 'GET',
params: {
action: 'update',
table: 'ch_operatori_webapp',
id: e.record.id,
field: e.field,
value: e.value
},
success: function (resp, opt){
e.record.commit();

},
failure: function (resp, opt){
e.record.reject();
}
});
}
}

});


My grid on storeLoad is popolated by this JSON

{"associazioni":[
{"id_operatore":6,"id_webapp":1},
{"id_operatore":6,"id_webapp":2},
{"id_operatore":6,"id_webapp":3}
]
}

How to involve combos in this grids, in my grid actually only ids are displayed (I want to dispaly: " displayField: 'descrizione'")

I can see that combo aren't loaded before the grid but only after...and other troubles.... This grid is a little complex for me.. :s

I miss the correct procedure to do what described... any suggestion...

Regards
Filippo