Code:
Ext.onReady(function(){
/***********************************************
* Grid
***********************************************/
Ext.define('MappingObjects', {
extend: 'Ext.data.Model',
fields: ['employeeID','employeeName','startDate','terminationDate','rpmEmployeeID','rpmEmployeeName']
});
Ext.define('RPMMappingObjects', {
extend: 'Ext.data.Model',
fields: ['employeeID', 'employeeName']
});
var rpmEmployeeMappingStore = new Ext.data.JsonStore({ // Ext.create("Ext.data.Store", {
id: 'rpmEmployeeMappingStoreId',
root:'rpmEmployees',
fields: [{name: 'rpmEmployeeID', type: 'string'},
{name: 'rpmEmployeeName', type: 'string'},
{name: 'displayx', mapping: 'rpmEmployeeID + " - " + obj.rpmEmployeeName'}],
// fields: [ {name: 'rpmEmployeeID', type: 'string'},
// {name: 'rpmEmployeeName', type: 'string'},
// {name: 'displayx', mapping: 'rpmEmployeeID + " - " + obj.rpmEmployeeName'}],
mode:'local',
// model:'RPMMappingObjects',
// autoLoad: true,
data: [{rpmEmployeeID:"", rpmEmployeeName:"",displayx:""}]
});
var EmployeeMappingStore = Ext.create("Ext.data.Store", {
model: 'MappingObjects',
autoLoad: false
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',{
clicksToEdit: 1
});
var rowEditing =Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
autoCancel: false
});
var Employeegrid = new Ext.grid.Panel({
plugins:[cellEditing],
selModel: {
selType: 'cellmodel'
} ,
id: 'employeeGridPanelId',
store: EmployeeMappingStore,
renderTo: 'employeeGrid',
title: 'Employee Mapping',
width: 800,
height: 600,
layout: 'fit',
cls: 'grid',
columns: [
{ header: "TAMS II Employee",
width: 170,
sortable: true,
dataIndex: 'employeeID',
flex: 1
},
{ header: "Employee Name",
width: 160,
sortable: true,
dataIndex: 'employeeName',
flex: 2
},
{ header: "Start Date",
width: 170,
sortable: true,
dataIndex: 'startDate',
flex: 3
},
{ header: "Termination Date",
width: 170,
sortable: true,
dataIndex: 'terminationDate',
flex: 4
},
{header: 'RPM Site',
dataIndex: 'rpmEmployeeID',
width: 140,
renderer: function(value, meta, record){
if(value != null && value != undefined) {
var fname = record.data.rpmEmployeeID + " " + record.data.rpmEmployeeName;
return fname;
} else {
return "";
}
},
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
queryMode: 'local',
mode:'local',
displayField:'displayx',
valueField:'rpmEmployeeID',
store: rpmEmployeeMappingStore,
lazyRender: false,
listClass: 'x-combo-list-small'
}
}
]
});
Ext.Ajax.request({
url : 'employees.json',
params: {
storeNumber: getStoreNumber()
},
success: function(response, opts) {
responseObj = Ext.JSON.decode(response.responseText);
for(var i= 0; i < responseObj.employees.length; i++) {
if(responseObj.employees.rpmEmployeeID != "") {
for(var x = 0; x < responseObj.rpm_Employees.length; x++) {
if(responseObj.rpm_Employees[x].rpmEmployeeID == responseObj.employees[i].rpmEmployeeID) {
responseObj.employees[i].rpmEmployeeName = responseObj.rpm_Employees[x].rpmEmployeeName;
break;
}
}
}
}
Ext.getCmp('employeeGridPanelId').getStore().loadData(responseObj.employees);
var pleaseSelectRecord = Ext.create('RPMMappingObjects', {
rpmEmployeeID : '-2',
rpmEmployeeName : 'Please Select'
});
// rpmEmployeeMappingStore.on('load', setComboValues(responseObj), this, {single:true});
rpmEmployeeMappingStore.loadData(responseObj.rpm_Employees);
rpmEmployeeMappingStore.insert(0, pleaseSelectRecord);
},
failure: function(response, opts) {
}
});
function saveChangedRPMEmployees() {
var storeID = Ext.get("storeNum").getValue();
var mySelections = new Array();
Ext.getCmp('employeeGridPanelId').getStore().each(
function(record) {
if(record.get('rpmEmployeeID') != null && record.get('rpmEmployeeID') != "") {
employeeId = record.get('employeeID');
rpmEmpId = record.get('rpmEmployeeID');
var myObj = {
"TAMSIIEmpID": employeeId,
"RPMEmpID": rpmEmpId
};
mySelections.push(myObj);
}
}
);
// console.log(mySelections);
var obj = {storeNumber: storeID, mapping:mySelections};
var postBody = Ext.JSON.encode(obj);
Ext.Ajax.request({
url : 'saveEmployeeMapping.json',
method: 'POST',
headers: { 'Content-Type': 'application/json' },
jsonData: {
"mapping" : mySelections,
"storeNumber" : storeID
},
success: function (response) {
// Ext.getCmp('employeeGridPanelId').getStore().commitChanges();
console.log(response);
},
failure: function (response) {
console.log(response);
}
});
}
});
I am having issue with diplay of values in combo box. I want to show rpmEmployeeID + " - " + rpmEmployeeName inside combo box, so I declared displayx in the field and I used displayx as as display value in the combo box. I amgetting empty strings in combo box. If I change display value to rpmEmployeeName it works. But I edit combo box it is getting messed up. Any help is apprecaited.