PDA

View Full Version : posting of valueField of a combobox in grid to server instead of data 'displayField'



moshe.90522
2 Dec 2013, 9:16 PM
Hi All,
I have been stuck with this since 1 week ,please help me on this47077


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>


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

Farish
3 Dec 2013, 5:52 AM
please use CODE tags to insert code in your posts.

Here is one way to do it:


var store_departments = Ext.create('Ext.data.Store', {
fields:[{name: 'id', type: 'int'}, 'name'],
data: [
{ 'name': 'Sales', "id": 1000 },
{ 'name': 'Marketing', "id": 1001 },
{ 'name': 'Technical', "id": 1002 }
]
});

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', {name: 'departmentId', type: 'int'}],
data: [
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", "departmentId": 1000 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", "departmentId": 1002 },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244", "departmentId": 1001 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", "departmentId": 1001 }
]
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 5,
autoCancel: false
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' },
{ text: 'Department', dataIndex: 'departmentId',
editor:
{
xtype:'combo',
store: store_departments,
allowBlank: true,
displayField: 'name',
valueField: 'id',
queryMode: 'local',
editable: false,
forceSelection: true
},
renderer: function(val)
{
return store_departments.findRecord("id", val).get('name');
}
}
],
height: 200,
width: 400,
plugins: [ rowEditing ],
renderTo: Ext.getBody()
});

In your main store (bound to the grid), you load the IDs instead of the names. you have another store containing the department names and ids. the renderer in that column displays the name and when you say, the valueField in the combo editor for that column saves the departmentId.

moshe.90522
4 Dec 2013, 1:25 AM
Hi Farish,

though i have applied suggested amendment,i am not able to show even my combo box,after gone through bugging using fire bug i came to know that findRecord is returing null ,i am pasting here what i have done as below.






{
header: 'Department',
width: 80,
sortable: true,
dataIndex: 'department',
editor: {
xtype: 'combo',
store :deptStore,
displayField :'name',
valueField :'id',
queryMode: 'local',
forceSelection:true
},
renderer:function(val){
// alert(val);
return deptStore.findRecord('id',val).get('name');
}


/* department store code: */

var deptStore = new Ext.create('Ext.data.JsonStore', {
id:'deptStore',
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',type:'int'},'name']
});

Farish
4 Dec 2013, 1:27 AM
make sure that your department store is loaded before you load the other store for the grid. you can use:


console.log(departmentStore.getRange());

to see if the store has records (just before using findRecord)

Alternatively, return val if findRecord returns val. then you should see the department id in your grid.

moshe.90522
4 Dec 2013, 3:17 AM
Hi Farish,

department store getting load before other stores is loading,getRange method showing records before grid load as shown in attached snap and my updated grid code is as follows ,please correct my code if it is wrong.

Thank u very much for your assistance.




<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 deptStore = new Ext.create('Ext.data.JsonStore', {
id:'deptStore',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'getDepartmentEmpAction.action',
reader: {
type: 'json',
idProperty :'name',
root: 'items' // your root of your data containing the array of fields for the store
}
},
fields:[{name:'id',type:'int'},'name']
});

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',
editor: {
xtype: 'combo',
store :deptStore,
displayField :'name',
valueField :'id',
queryMode: 'local',
forceSelection:true
},
renderer:function(val){
alert(deptStore.getRange());
deptStore.reload();
var record = deptStore.findRecord("id",val).get('name');
return record;
}
}, {
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>

Farish
4 Dec 2013, 3:25 AM
In your Employee model, is department the id of the department or its name? it should be the id for this to work

moshe.90522
4 Dec 2013, 3:47 AM
Hi Farish,

Thank u very much ,i don't know how many day i have spent on this ,really working great

Thank u very much once again :)

Farish
4 Dec 2013, 3:49 AM
glad i could help

moshe.90522
5 Dec 2013, 12:04 AM
Hi Farish,

your script for posting valueField is working fine on update any existing row ,but i couldn't get post on Add new row.Even i am not able send request to server while clicking on save(update) button.It is showing ext.fly is null or not an object.Please help where is the disturbance in my current script or whether it is required to any enhancement.




<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'}, {name:'department',type:'int'},{name:'country',type:'int'}],
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', {name:'department',type:'int'},{name:'country',type:'int'}]
},
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) {
alert("on add");
// 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 deptStore = new Ext.create('Ext.data.JsonStore', {
id:'deptStore',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'getDepartmentEmpAction.action',
reader: {
type: 'json',
idProperty :'name',
root: 'items' // your root of your data containing the array of fields for the store
}
},
fields:[{name:'id',type:'int'},'name']
});


var locStore = 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']
});

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',
editor: {
xtype: 'combo',
store :deptStore,
displayField :'name',
valueField :'id',
queryMode: 'local',
forceSelection:true
},
renderer:function(val){
deptStore.load();
var record = deptStore.findRecord("id",val).get('name');
return record;
}
}, {
text: 'Country',
width: 80,
sortable: true,
dataIndex: 'country',
editor: {
xtype: 'combo',
store :locStore,
displayField :'name',
valueField :'id',
queryMode: 'local',
forceSelection:true
},
renderer:function(val){
locStore.load();
var record = locStore.findRecord("id",val).get('name');
return record;
}
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
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);
locStore.load();
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>

Farish
5 Dec 2013, 12:27 AM
replace this:

store.insert(0, new Employee());
with

store.insert(0, {});
and see if it helps.

about the ext.fly error, search for it on google and see if you find some solution.

what do you do on Save button? do you call store.sync()? before that, call store.getNewRecords() and see what it returns. if its null, that means the store doesnt know there are any new records to be synced.

moshe.90522
5 Dec 2013, 1:33 AM
I checked with your suggestion and replaced
store.insert(0, new Employee()); with
store.insert(0, {}); no changes for this substitution. I have added getNewRecords() it is returning null.I came to know that store is not sync ,how to do that can u suggest me.

Farish
5 Dec 2013, 1:43 AM
do you have a Save button? i cant see it in your code. what do you do when its pressed? you are using autoSync: true. so you shouldnt need a save button and as soon as there is a change in your store, it should send the request to backend...

moshe.90522
5 Dec 2013, 2:00 AM
Hi

in my grid there is no save button,here i want to click first 'Add' button ,there new row will be added to grid as first record, after i enter valid data then i will go to click update button as shown in screen shot.then the request will go to server using 'saveEmpAction.action'.As of now reguest going to requested path ('saveEmpAction.action') but posting of submitted data is not happening due to error ext.fly is not null or not an object.

47125

Farish
5 Dec 2013, 2:36 AM
this is another problem. I would recommend that you start a new question for it so that someone who knows the solution might help you.