PDA

View Full Version : Ext.fly is not null or not an object problem



moshe.90522
10 Dec 2013, 11:29 PM
Hi All,

before this i came with lot of quires and i got good resolutions from you ,again i came with another one which i have been facing while implementing CRUD grid.

While i am trying to save data for newly added row i struck with Ext.fly is not null or not an object problem.Surprisingly the request has been going to server and data have been saving into data base but server does not returning anything where server has to be return 'saved successfully' alert and showing error ' Ext.fly is not null or not an object' as shown below error.png screen shot.

Where as when i am updating any existing row ,request and data have been sent to server and server has been returning 'saved successfully' alert with out any problem.Here i am attaching my code and grid snap as below.

Please assist me regarding this.




<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 : 'saveGridEmpAction.action',
update: 'updateEmployeeEmpAction.action',
destroy: 'deleteEmployeeEmpAction.action'
},
reader: {
type: 'json',
root: 'items'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data',
encode: true
}
},
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);
store.removeAll();
Ext.Msg.alert('STATUS',obj.status[0].name);
store.load();
//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("row edit");
// alert(action.response.responseText);
//store.sync();
//alert("clicked edit");
//store.sync();
// 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', {
autoLoad: true,
autoSync: 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']
});


var locStore = new Ext.create('Ext.data.JsonStore', {
autoLoad: true,
autoSync: 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',
field: {
xtype: 'combobox',
store :deptStore,
valueField :'id',
displayField :'name',
queryMode: 'local',
forceSelection:true
},
renderer:function(val){
locStore.load();
var record = deptStore.findRecord("id",val).get('name');
return record;
}
}, {
text: 'Country',
width: 80,
sortable: true,
dataIndex: 'country',
field: {
xtype: 'combobox',
store :locStore,
valueField :'id',
displayField :'name',
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(){
// 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>4718247184

Kevin Jackson
17 Dec 2013, 5:05 AM
Which version of ExtJS are you using? Am I correct that the data is saved correctly on the server but the server is reporting back the error? Where are you using.Ext.fly? I didn't see it in the code.