PDA

View Full Version : How to post valueField of a combobox in grid to server



moshe.90522
30 Nov 2013, 12:36 AM
Hi All,
Hoping you all doing well..

I have been searching a solution for posting 'valueField' of a combo box in grid to server instead of 'displayField'.but i am not able to do it.Here i am providing my code snippets .

current posting data to server :

{"id":9524,"emp_name":"Jacob.Issacson","gender":"male","birth_date":"2013-11-04T00:00:00","email":"jacob.issacson@jsw.in","phone":911199321,"salary":"53190.0","department":"FINANCE","country":"USA"}

here in request it is posting 'department name' where i required to post 'department id'


GRID SNAP : please find the attachemnt 'grid_snap.png

GRID CODE :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-neptune.css" />
<link rel="stylesheet" type="text/css" href="extjs/examples/restful/restful.css" />
</script>
<!--<script type="text/javascript" src="extjs/examples/shared/examples.js"></script>-->
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/RowEditor.js"></script>


<script type="text/javascript">
Ext.require(['Ext.data.*', 'Ext.grid.*','Ext.util.*','Ext.ux.*']);

Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
useNull: false
},'emp_name','gender','birth_date', 'email',{name:'phone',type:'int'},{name:'salary',type:'double'}, 'department', 'country'],
validations: [{
type: 'length',
field: 'emp_name',
min: 1
},{
type: 'length',
field: 'birth_date',
min: 1
},{
type: 'length',
field: 'email',
min: 1
}, {
type: 'length',
field: 'department',
min: 1
}, {
type: 'length',
field: 'country',
min: 1
}]
});


Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
autoLoad: true,
autoSync: true,
model: 'Employee',
proxy: {
type: 'ajax',
method:'POST',
api: {
read : 'getEmployeeInfoEmpAction.action',
create : 'saveEmpAction.action',
update: 'updateEmployeeEmpAction.action',
destroy: 'deleteEmployeeEmpAction.action'
},
reader: {
type: 'json',
root: 'items'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true
},
fields:[{
name: 'id',
type: 'int'
},{name:'emp_name',type:'string'},{name:'gender',type:'string'},{name:'phone',type:'int'},{name:'salary',type:'double'},{name:'birth_date',type:'date',dateFormat:'d/m/Y'}, 'email', 'department', 'country']
},
listeners: {
write: function(store, operation){
record = operation.records[0];
var record = operation.getRecords()[0],name = Ext.String.capitalize(operation.action),verb;
if (name == 'Destroy') {
// alert(operation.getRecords()[0]);
verb = 'Destroyed';
} else {
verb = name + 'd';
}
//Ext.Msg.alert(name, Ext.String.format("{0} employee: {1}", verb, record.getId()));
var obj = Ext.JSON.decode(operation.response.responseText);
Ext.Msg.alert('STATUS',obj.status[0].name);
store.reload();
//grid.getSelectionModel().clearSelections();
}
}
});

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);
}
},
edit:function(rowEditing, context,action) {
// Canceling editing of a locally added, unsaved record: remove it
/* if (context.record.phantom) {

}*/

// alert(grid.getSelectionModel().getSelection()[0].get('department'));

// var record = context.record;
// var recordData = record.getData();
// recordData.Funcionalidad = 'Modificar';
// alert(Ext.JSON.decode(recordData));
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: 'emp-grid',
plugins: [rowEditing],
width: 650,
frame: true,
title: 'Employee Details',
store: store,
iconCls: 'icon-user',
selModel: Ext.create('Ext.selection.CheckboxModel'),
columns: [
// Ext.create('Ext.grid.RowNumberer'),
new Ext.grid.RowNumberer({width: 10,dataIndex:'rowno'}),
{
text : 'row',
dataIndex: 'rowIndex',
sortable : false,
hidden: true,
hideable: false,
renderer : function(value, metaData, record, rowIndex)
{
return rowIndex;
}
},
{
text: 'Employee Name',
flex: 1,
sortable: true,
dataIndex: 'emp_name',
field: {
xtype: 'textfield'
}
},
{
text: 'Date Of Birth',
width: 100,
sortable: true,
dataIndex: 'birth_date',
field: {
xtype: 'datefield',
format :'d/m/Y'
}
},
{
text: 'Gender',
flex: 1,
sortable: true,
dataIndex: 'gender',
field: {
xtype: 'textfield'
}
},{
text: 'Salary',
flex: 1,
sortable: true,
dataIndex: 'salary',
field: {
xtype: 'textfield'
}
}, {
text: 'Email',
flex: 1,
sortable: true,
dataIndex: 'email',
field: {
xtype: 'textfield'
}
},{
text: 'Contact',
flex: 1,
sortable: true,
dataIndex: 'phone',
field: {
xtype: 'textfield'
}
}, {
header: 'Department',
width: 80,
sortable: true,
dataIndex: 'department',
field: {
xtype: 'combobox',
store :new Ext.create('Ext.data.JsonStore', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'getDepartmentEmpAction.action',
reader: {
type: 'json',
idProperty :'id',
root: 'items' // your root of your data containing the array of fields for the store
}
},
fields:['name','id']
}),
valueField :'id',
displayField :'name',
queryMode: 'local'
}
}, {
text: 'Country',
width: 80,
sortable: true,
dataIndex: 'country',
field: {
xtype: 'combobox',
store :new Ext.create('Ext.data.JsonStore', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'countryEmpAction.action',
reader: {
type: 'json',
idProperty :'id',
root: 'items' // your root of your data containing the array of fields for the store
}
},
fields:['name','id']
}),
valueField :'id',
displayField :'name',
queryMode: 'local'
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new Employee());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
// alert(selection);
if (selection) {
store.remove(selection);
}
}

/*
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
*/
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
});
</script>

<body>
<table>
<tr>
<td>

</td>
<td>
<div align="right" style="margin-left:200px;" id="emp-grid"></div>
</td>
</tr>
</table>

</body>
</html>

existdissolve
30 Nov 2013, 10:34 AM
What does the response from getDepartmentEmpAction.action look like?

moshe.90522
1 Dec 2013, 9:09 PM
Hi ,

i am sorry as i will not available ,i am in sunday rejoice,hence i couldn't see the post,here i am including response for 'getDepartmentEmpAction.action '

{"items":[{"name":"ACCOUNTS","id":2}, {"name":"FINANCE","id":3}, {"name":"ITS DEVLOP","id":4}, {"name":"SALES","id":1}],"label":"name","identifier":"name"}.

Thank in advance... :)

moshe.90522
1 Dec 2013, 9:39 PM
Hi,

Response for 'getDepartmentEmpAction.action '

{"items":[{"name":"ACCOUNTS","id":2}, {"name":"FINANCE","id":3}, {"name":"ITS DEVLOP","id":4}, {"name":"SALES","id":1}],"label":"name","identifier":"name"}.

Thanks in advance... :)

moshe.90522
2 Dec 2013, 12:04 AM
Response for 'getDepartmentEmpAction.action '

{"items":[{"name":"ACCOUNTS","id":2}, {"name":"FINANCE","id":3}, {"name":"ITS DEVLOP","id":4}, {"name":"SALES","id":1}],"label":"name","identifier":"name"}.

pls assist me regarding this..

Thanks in advance... :)