PDA

View Full Version : on Adding row problem



moshe.90522
5 Dec 2013, 2:54 AM
Hi All,

I have a grid which is updating correctly on update of any existing record.But i have facing problem while saving data on add new record.In my grid i am having add button using that i am able to add a row as new record but the problem is while saving the data for new record.I struck with Ext.Fly() is null or not an object error.Here i am attaching grid and relevant code ,please help to come out this.




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) {
// 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(){
// alert(store.getNewRecords());
store.insert(0, {});
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);
}
}
*/
}]
}]
});
store.load();
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
});
</script>





47126

scottmartin
5 Dec 2013, 6:34 AM
How far do you get in the save process

Is data sent to server, and does the server return anything?
What happens if you comment out your custom writer?

moshe.90522
5 Dec 2013, 7:46 AM
Hi scottmartin,
I am not able to send data to server,when i an clicking on update button empty request is going to server.


Thanks in advance.