PDA

View Full Version : combo box in edit window submits description instead of Id



chezo
14 Mar 2010, 1:45 AM
Hi,

Im having a problem with setting the value of my combo box in my edit window.

Problem Description:
I have a clients screen which consists of a grid and a few buttons as below:
http://striveit.com/images/clients.png

The Clients Window source code:

MyDesktop.ManageClients = Ext.extend(Ext.app.Module, {
id:'manage-clients-win',
init : function(){
this.launcher = {
text: MANAGE_CLIENTS_TITLE,
iconCls:'Client',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
// Get handle to existing window
var desktop = this.app.getDesktop();
var win = desktop.getWindow('manage-clients-win');
MyDesktop.desktop = desktop;
// If window does not exist, create new window
if(!win){
// Create data store
clientsStore = new Ext.data.Store({
url: 'clients.php?listClients',
reader: new Ext.data.JsonReader(
{
root:'rows',
id:'client_id'
},
[
'clientId',
'titleId',
'titleDescr',
'titleCode',
'firstname',
'surname',
'leName', //legal entity name
'leRefNo',
'idNo',
'leTypeId',
'leDescr',
'clientStatusId',
'clientStatusCode',
'clientStatusDescr',
'telNo',
'cellNo',
'workNo',
'comment',
'userId',
'userName',

{
name: 'createDate',
type: 'date',
dateFormat: DATE_FORMAT_IN
},

{
name: 'updateDate',
type: 'date',
dateFormat: DATE_FORMAT_IN
}
]
)
});



clientsGrid = new Ext.grid.GridPanel({
border:false,
//ds: store,
store: clientsStore,
cm: new Ext.grid.ColumnModel([

new Ext.grid.RowNumberer(),
{
header: MANAGE_CLIENTS_FIELD_CLIENTID,
width:120,
sortable:true,
dataIndex:'clientId',
autoExpandColumn:true
},

{
header: MANAGE_CLIENTS_FIELD_TITLE,
width:120,
sortable:true,
dataIndex:'titleDescr'
},

{
header: MANAGE_CLIENTS_FIELD_FIRSTNAME,
width:120,
sortable:true,
dataIndex:'firstname',
autoExpandColumn:true
},

{
header: MANAGE_CLIENTS_FIELD_SURNAME,
width:120,
sortable:true,
dataIndex:'surname',
autoExpandColumn:'surname'
},

{
header: MANAGE_CLIENTS_FIELD_LEGAL_ENTITY_NAME,
width:120,
sortable:true,
dataIndex:'leName'
},

{
header: MANAGE_CLIENTS_FIELD_LE_REF_NO,
width:120,
sortable:true,
dataIndex:'leRefno'
},
{
header: MANAGE_CLIENTS_FIELD_IDNO,
width:120,
sortable:true,
dataIndex:'idNo'
},

{
header: MANAGE_CLIENTS_FIELD_TEL_NO,
width:120,
sortable:true,
dataIndex:'telNo'
},
{
header: MANAGE_CLIENTS_FIELD_WORK_NO,
width:120,
sortable:true,
dataIndex:'workNo'
},
{
header: MANAGE_CLIENTS_FIELD_CELL_NO,
width:120,
sortable:true,
dataIndex:'cellNo'
},
{
header: MANAGE_CLIENTS_FIELD_COMMENT,
width:120,
sortable:true,
dataIndex:'comment'
},
{
header: MANAGE_CLIENTS_FIELD_USERNAME,
width:120,
sortable:true,
dataIndex:'username'
},

{
header: MANAGE_CLIENTS_FIELD_CREATED_DATE,
width:120,
sortable:true,
renderer: Ext.util.Format.dateRenderer(DATE_FORMAT_SHOW),
dataIndex:'createDate'
},

{
header: MANAGE_CLIENTS_FIELD_UPDATED_DATE,
width:120,
sortable:true,
renderer: Ext.util.Format.dateRenderer(DATE_FORMAT_SHOW),
dataIndex:'updateDate'
}
]),
//plugins: enabledColumn, // Enable editing of the check column
viewConfig: {
forceFit:true
},

tbar:[{
text:MANAGE_CLIENTS_ADD,
tooltip:MANAGE_CLIENTS_ADD_DESC,
iconCls:'Client-add',
handler: this.ClientAddEdit_clicked
}, '-', {
text:MANAGE_CLIENTS_EDIT,
tooltip:MANAGE_CLIENTS_EDIT_DESC,
iconCls:'Client-edit',
handler: this.ClientAddEdit_clicked
}, '-', {
text:MANAGE_CLIENTS_REFRESH,
tooltip:MANAGE_CLIENTS_REFRESH_DESC,
iconCls:'Client-refresh',
handler: this.ClientRefresh_clicked
}]
});

// Set double-click event handler for editing in grid
clientsGrid.on('rowdblclick', this.ClientAddEdit_clicked, this);

// Create window
win = desktop.createWindow({
id: 'manage-clients-win',
title:MANAGE_CLIENTS_TITLE,
width:740,
height:480,
iconCls: 'Client',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: clientsGrid
});
}

// Update window contents
clientsStore.load();

// Show Window
win.show();

// Focus the grid
win.on('afterlayout', function(){
if (clientsGrid != null){
clientsGrid.getSelectionModel().selectFirstRow();
//grid.getView().focusEl.focus();
clientsGrid.focus();
}
}, this, {
single: true
}
);
},

The add client button function works 100% but the problem comes in
when I try to edit an existing client record in my edit window as below:
http://striveit.com/images/clientEditWin.png

Heres the client edit window source code:

ClientAddEdit_clicked : function(src){
// Prepare variables to determine if a new Client, or editing existing
var clientId = "";
var titleId = "";
var titleDescr = "";
var titleCode = "";
var firstname = "";
var surname = "";
var leName = "";
var leRefNo = "";
var idNo = "";
var leTypeId = "";
var leTypeCode ="";
var leDescr = "";
var clientStatusId = "";
var clientStatusCode = "";
var clientStatusDescr = "";
var telNo = "";
var cellNo = "";
var workNo = "";
var comment = "";
var userId = "";
var userName = "";

newClient = (src.text == MANAGE_CLIENTS_ADD)?true:false;
if (newClient) {
winName = 'manage-clients-add-win';
}
else {
winName = 'manage-clients-edit-win';
//Fill the record with the selected client details
var rec = clientsGrid.getSelectionModel().getSelected();
if (rec== null) {
//window.alert(MANAGE_CLIENTS_MESSAGE_NO_Client_SELECTED);
Ext.MessageBox.alert('Error', MANAGE_CLIENTS_MESSAGE_NO_CLIENT_SELECTED);
return
}

clientId = rec.get('clientId');
titleId = rec.get('titleId');
titleDescr = rec.get('titleDescr');
titleCode = rec.get('titleCode');
firstname = rec.get('firstname');
surname = rec.get('surname');
leName = rec.get('leName'); //legal entity name
leRefNo = rec.get('leRefNo');
idNo = rec.get('idNo');
leTypeId = rec.get('leTypeId');
leTypeCode = rec.get('leTypeCode');
leDescr = rec.get('leDescr');
clientStatusId = rec.get('clientStatusId');
clientStatusCode = rec.get('clientStatusCode');
clientStatusDescr = rec.get('clientStatusDescr');
telNo = rec.get('telNo');
cellNo = rec.get('cellNo');
workNo = rec.get('workNo');
comment = rec.get('comment');
userId = rec.get('userId');

}


// Get handle to existing window
var desktop = MyDesktop.desktop;
var win = desktop.getWindow(winName);

// If window does not exist, create new window
if(!win){
// Create store
// Titles, legal_entity_types, client_status
titlesStore = new Ext.data.Store({
url:'clients.php?listTitles',
reader: new Ext.data.JsonReader(
{
root: 'rows',
id: 'id'
},
[
'id', 'code', 'description'
]
)
});

leTypesStore = new Ext.data.Store({
url:'clients.php?listLeTypes',
reader: new Ext.data.JsonReader(
{
root: 'rows',
id: 'id'
},
[
'id', 'code', 'description'
]
)
});

clientStatusStore = new Ext.data.Store({
url:'clients.php?listClientStatus',
reader: new Ext.data.JsonReader(
{
root: 'rows',
// id: 'code'
id:'id'
},
[
'id', 'code', 'description'
]
)
});
titlesStore.load();
leTypesStore.load();
clientStatusStore.load();

// Create window
win = desktop.createWindow({
id: winName,
title:newClient ? MANAGE_CLIENTS_ADD_LONG : MANAGE_CLIENTS_EDIT_LONG,
width:300,
height:300,
iconCls: 'Client',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
modal: true,

//hideMode: 'offsets', // Fix not working for Combobox sizing
items: [
formPanel = new Ext.form.FormPanel({
layout:'form',
labelAlign:'left',
width:410,
autoHeight:false,
frame:true,
hideMode: 'offsets',
monitorValid:true,
items:[
{
xtype: 'hidden',
width:150,
name: 'clientId',
value: clientId,
allowBlank: false
},
{
fieldLabel: MANAGE_CLIENTS_FIELD_TITLE,
xtype:'combo',
width:120,
triggerAction:'all',
mode:'local',
listWidth:150,
name: 'title',
hiddenName: 'titleId',
emptyText: 'Select title',
store: titlesStore,
autoLoad:true,
listeners: { select: { fn:function(combo, value) {}}},
displayField: 'description',
valueField: 'id',
value:titleDescr,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: MANAGE_CLIENTS_FIELD_FIRSTNAME,
width:150,
id:'firstname',
name: 'firstname',
value: firstname,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: MANAGE_CLIENTS_FIELD_SURNAME,
width:150,
name: 'surname',
value: surname,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: MANAGE_CLIENTS_FIELD_LEGAL_ENTITY_NAME,
width:150,
name: 'leName',
value: leName,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: MANAGE_CLIENTS_FIELD_LE_REF_NO,
width:150,
name: 'leRefNo',
value: leRefNo,
allowBlank: false
},
{
xtype:'numberfield',
fieldLabel: MANAGE_CLIENTS_FIELD_IDNO,
width:150,
name:'idNo',
value:idNo,
maxLength: 13,
allowBlank:true
},
{
fieldLabel:MANAGE_CLIENTS_FIELD_LE_TYPE,
xtype:'combo',
width:130,
triggerAction:'all',
mode:'local',
listWidth:150,
hiddenName: 'leTypeId',
name: 'leType',
emptyText: 'Select legal entity type',
store: leTypesStore,
autoLoad:true,
displayField: 'description',
valueField: 'id',
value: leDescr,
//selectOnFocus: true,
listeners: { select: { fn:function(combo, value) {}}},
allowBlank: false
},
{
fieldLabel:'Client status',
xtype:'combo',
width:130,
triggerAction:'all',
mode:'local',
listWidth:150,
hiddenName: 'clientStatusId',
name: 'clientStatus',
emptyText: 'Select status',
store: clientStatusStore,
autoLoad:true,
displayField: 'description',
//valueField: 'code',
valueField:'id',
//value: clientStatusCode,
value: clientStatusDescr,
selectOnFocus: true,
listeners: { select: { fn:function(combo, value) {}}},
allowBlank: false
},
{
xtype:'numberfield',
fieldLabel: MANAGE_CLIENTS_FIELD_TEL_NO,
width:150,
name:'telNo',
value:telNo,
allowBlank:true
},
{
xtype:'numberfield',
fieldLabel: MANAGE_CLIENTS_FIELD_WORK_NO,
width:150,
name:'workNo',
value:workNo,
allowBlank:true
},
{
xtype:'numberfield',
fieldLabel: MANAGE_CLIENTS_FIELD_CELL_NO,
width:150,
name:'cellNo',
value:cellNo,
allowBlank:true
},
{
xtype:'textfield',
fieldLabel: MANAGE_CLIENTS_FIELD_COMMENT,
width:150,
maxLength: 100,
name:'comment',
height:'auto',
value:comment,
allowBlank:true
}
// {
// xtype: 'checkbox',
// fieldLabel: MANAGE_CLIENTS_FIELD_STATUS,
// width:150,
// name: 'status',
// checked : status
// },
],
buttons: [
{
text: MANAGE_CLIENTS_BUTTON_SAVE,
formBind: true,
disabled: newClient,
handler: function(){
// TBD: Check Client name

// Submit form
formPanel.getForm().submit({
url: "clients.php",
scope: this,
success: function(form, action) {
clientsGrid.store.load();
win.close();
},
failure: function(form, action) {
Ext.MessageBox.alert('Error', "Error saving record (Reason:"+action.failureType+")");
win.close();
},
params: {
cmd: 'save',
rc: newClient?'FormClientAdd':'FormClientEdit',
id: ''
},
waitMsg: MANAGE_CLIENTS_STATUS_BUSY
});
}
},{
text: MANAGE_CLIENTS_BUTTON_CANCEL,
formBind: false,
handler: function(){
win.close();
}
}
]

})
]
});
}
// Load Stores
titlesStore.load();
clientStatusStore.load();
leTypesStore.load();

// Focus first edit field
win.on('afterlayout', function(){
field = Ext.getCmp('firstname').focus('',200); // Give 200ms to allow grid to finish completely
}, this, {
single: true
}
);

// Show Window
win.show();

},

As you can see in the source I set the combo box value to the record variable I created.
Well the screen loads up fine and the combo box description is set as in the picture.

But the problem comes in when I try to submit the form. The description values are posted instead of the id fields, see below:

UPDATE
clients
SET
title_id = 'CHIEF', --The ID must be POSTED
firstname = 'john',
surname = 'doe',
le_name = 'doe, j',
le_ref_no = 'jj',
id_no = '32',
le_type_id = 'Service Legal Entity', --The ID must be POSTED
client_status_id = 'Not Active', --The ID must be POSTED
tel_no = '1',
cell_no = '1',
work_no = '1',
comment = '1',
create_date = NOW(),
update_date = NOW(),
user_id = '1'
WHERE
id = '3'


I have narrowed it down to:

I have noticed that when I click on the combo box and and then try to submit the form the titleId is passed correctly to the DB and NOT the description, which is what I want without having to click on the combo box again.

Please help. I really dont want to write another sql statement where I do a lookup based on the description and then save the appropriate titleId to the DB or is this the only way this will work?

Thanks

PS: I hope this is not against the forum rules but I am also looking for a few extjs developers to assist me on this project at a good rate :)

smichels
21 Jul 2010, 4:58 PM
I have the same problem. When i submit the form and see the post, the description was sent :(

smichels
21 Jul 2010, 5:05 PM
I force the submit to pass an parameter with the getValue() of the ComboBox...