Can't submit new record through form

[ghoz]

Here's my paging grid sample.
While clicking on the add button, the form displays fine.
When clicking the save button, I get an NS_ERROR_ILLEGAL_VALUE error.

Thanks for helping me sorting this out.

Ext.onReady(function(){
var myPageSize = 10;

//we enable the QuickTips for the later Pagebar
Ext.QuickTips.init();

function formatBoolean(value){
return value ? 'Yes' : 'No';
}

function formatDate(value){
return value ? value.dateFormat('d/m/Y') : '';
}

/************************************************************
* Display the result in page
* the column model has information about grid columns
* dataIndex maps the column to the specific data field in
* the data store (created below)
************************************************************/
var cm = new Ext.grid.ColumnModel([{
id: 'id',
header: "ID",
dataIndex: 'id',
width: 50,
hidden: true
},{
header: "Last Name",
dataIndex: 'lastname',
width: 200,
sortable: true
},{
header: "First Name",
dataIndex: 'firstname',
width: 200,
sortable: true
},{
header: "Company",
dataIndex: 'company',
width: 200,
sortable: true
},{
header: "Phone",
dataIndex: 'phone',
width: 100,
sortable: true
},{
header: "Fax",
dataIndex: 'fax',
width: 100,
sortable: true
},{
header: "eMail",
dataIndex: 'email',
width: 200,
sortable: true
},{
header: "Birth Date",
dataIndex: 'birthdate',
width: 233,
renderer: formatDate,
sortable: true
}
]);

// by default columns are sortable
cm.defaultSortable = false;

// this could be inline, but we want to define the NewContact record
// type so we can add records dynamically
var NewContact = Ext.data.Record.create([
{name: 'id' , type: 'string'},
{name: 'lastname' , type: 'string'},
{name: 'firstname', type: 'string'},
{name: 'company' , type: 'string'},
{name: 'phone' , type: 'string'},
{name: 'fax' , type: 'string'},
{name: 'email' , type: 'string'},
{name: 'birthdate', type: 'date', dateFormat: 'd/m/Y'}
]);

/************************************************************
* connect to backend - grid - core part
* create the Data Store
* connect with backend and list the result in page
* through JSON format
************************************************************/
var ds = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/extjs/examples/gagri/contacts.php?action=listResult'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'totalCount',
id: 'id'
}, [
{name: 'id'},
{name: 'lastname'},
{name: 'firstname'},
{name: 'company'},
{name: 'phone'},
{name: 'fax'},
{name: 'email'},
{name: 'birthdate', type:'date', dateFormat:'d/m/Y'}
]),

// turn on remote sorting
remoteSort: true
});

ds.setDefaultSort('lastname', 'ASC');

// create the editor grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: cm,
//selModel: new Ext.grid.CellSelectionModel(),
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false
});

var layout = Ext.BorderLayout.create({
center: {
margins:{left:2,top:3,right:2,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');

// render it
grid.render();

/************************************************************
* create header panel
* add filter field - search function
************************************************************/
var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead);

filterButton = new Ext.Toolbar.MenuButton({
icon: 'public/image/list-items.gif',
cls: 'x-btn-text-icon',
text: 'Choose Filter',
tooltip: 'Select one of filter',
menu: {items: [
new Ext.menu.CheckItem({ text: 'Last Name' , value: 'lastname' , checked: true , group: 'filter', checkHandler: onItemCheck }),
new Ext.menu.CheckItem({ text: 'First Name', value: 'firstname', checked: false, group: 'filter', checkHandler: onItemCheck }),
new Ext.menu.CheckItem({ text: 'eMail' , value: 'email' , checked: false, group: 'filter', checkHandler: onItemCheck })
]},
minWidth: 105
});
tb.add(filterButton);

// Create the filter field
var filter = Ext.get(tb.addDom({ // add a DomHelper config to the toolbar and return a reference to it
tag: 'input',
type: 'text',
size: '30',
value: '',
style: 'background: #F0F0F9;'
}).el);

// press enter keyboard
filter.on('keypress', function(e) { // setup an onkeypress event handler
if(e.getKey() == e.ENTER && this.getValue().length > 0) {// listen for the ENTER key
ds.load({params:{start:0, limit:myPageSize}});
}
});

filter.on('keyup', function(e) { // setup an onkeyup event handler
if(e.getKey() == e.BACKSPACE && this.getValue().length === 0) {// listen for the BACKSPACE key and the field being empty
ds.load({params:{start:0, limit:myPageSize}});
}
});

// Update search button text with selected item
function onItemCheck(item, checked)
{
if(checked) {
filterButton.setText(item.text + ':');
}
}

/************************************************************
* create footer panel
* actions and paging
************************************************************/
var gridFoot = grid.getView().getFooterPanel(true);

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: myPageSize,
displayInfo: true,
displayMsg: 'total {2} results found. Current shows {0} - {1}',
emptyMsg: "not result to display"
});

// add the detailed add button
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Add',
cls: '',
toggleHandler: doAdd
});

// add the detailed delete button
paging.add('-', {
pressed: true,
enableToggle:true,
text: 'Delete',
cls: '',
toggleHandler: doDel
});
// --- end -- create foot panel

/************************************************************
* load parameter to backend
* have beforeload function
************************************************************/
ds.on('beforeload', function() {
ds.baseParams = { // modify the baseParams setting for this request
filterValue: filter.getValue(),// retrieve the value of the filter input and assign it to a property named filter
filterTxt: filterButton.getText()
};
});

// trigger the data store load
ds.load({params:{start:0, limit:myPageSize}});

/************************************************************
* Action - delete
* start to handle delete function
* need confirm to delete
************************************************************/
function doDel(){
var m = grid.getSelections();
if(m.length > 0)
{
Ext.MessageBox.confirm('Message', 'Do you really want to delete them?' , doDel2);
}
else
{
Ext.MessageBox.alert('Error', 'Please select at least one item to delete');
}
}

function doDel2(btn)
{
if(btn == 'yes')
{
var m = grid.getSelections();
var jsonData = "[";

for(var i = 0, len = m.length; i < len; i++){
var ss = "{\"id\":\"" + m[i].get("id") + "\"}";
//alert(ss);
if(i==0) jsonData = jsonData + ss ;
else jsonData = jsonData + "," + ss;
ds.remove(m[i]);
}
jsonData = jsonData + "]";
ds.load({params:{start:0, limit:myPageSize, delData:jsonData}});
}
}

/************************************************************
* Add an "clickoutside" event to a Grid.
* @param grid {Ext.grid.Grid} The grid to add a clickoutside event to.
* The handler is passed the Event and the Grid.
************************************************************/
function addClickOutsideEvent(grid) {
if (!grid.events.clickoutside) {
grid.addEvents({"clickoutside": true});
}
if (!Ext.grid.Grid.prototype.handleClickOutside) {
Ext.grid.Grid.override({
handleClickOutside: function(e) {
var p = Ext.get(e.getTarget()).findParent(".x-grid-container");
if (p != this.container.dom) {
this.fireEvent("clickoutside", e, grid);
}
}
});
}
Ext.get(document.body).on("click", grid.handleClickOutside, grid);
}

/************************************************************
* Create a new dialog - reuse by create and edit part
************************************************************/
function createNewDialog(dialogName) {
var thisDialog = new Ext.LayoutDialog(dialogName, {
modal:true,
autoTabs:true,
proxyDrag:true,
resizable:false,
width: 480,
height: 302,
shadow:true,
center: {
autoScroll: true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
thisDialog.addKeyListener(27, thisDialog.hide, thisDialog);
thisDialog.addButton('Cancel', function() {thisDialog.hide();});

return thisDialog;
};

/************************************************************
* Action - update
* handle double click
* user select one of the item and want to update it
************************************************************/
grid.on('rowdblclick', function(grid, rowIndex, e) {
var selectedId = ds.data.items[rowIndex].id;

// get information from DB and set form now...
var contact_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'http://localhost/extjs/examples/gagri/contacts.php?action=loadData&id=' + selectedId}),
reader: new Ext.data.JsonReader({},['id','lastname','firstname','company','phone','fax','email','birthdate']),
remoteSort: false
});

contact_data.on('load', function() {
// set value now
var updateId = contact_data.getAt(0).data['id'];
lastname_show.setValue(contact_data.getAt(0).data['lastname']);
firstname_show.setValue(contact_data.getAt(0).data['firstname']);
company_show.setValue(contact_data.getAt(0).data['company']);
phone_show.setValue(contact_data.getAt(0).data['phone']);
fax_show.setValue(contact_data.getAt(0).data['fax']);
email_show.setValue(contact_data.getAt(0).data['email']);
birthdate_show.setValue(contact_data.getAt(0).data['birthdate']);

var updateInstanceDlg;
if (!updateInstanceDlg) {
updateInstanceDlg = createNewDialog("a-updateInstance-dlg");
updateInstanceDlg.addButton('Save', function() {
// submit now... all the form information are submit to the server
// handle response after that...
if (form_instance_update.isValid()) {
form_instance_update.submit({
params:{id : updateId},
waitMsg:'Updating this contact now...',
reset: false,
failure: function(form_instance_update, action) {
updateInstanceDlg.hide();
Ext.MessageBox.alert('Error Message', action.result.errorInfo);
},
success: function(form_instance_update, action) {
updateInstanceDlg.hide();
//Ext.MessageBox.alert('Confirm', action.result.info);
ds.load({params:{start:0, limit:myPageSize}});
}
});
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
});

var layout = updateInstanceDlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('a-updateInstance-inner', {title: 'Update Contact'}));
layout.endUpdate();

updateInstanceDlg.show();
}
});

contact_data.load();
});

/************************************************************
* Action - add
* start to handle add function
* new page appear and allow to submit
************************************************************/

/************************************************************
* To create add new contact dialog now....
************************************************************/
function doAdd(){
var aAddInstanceDlg;

if (!aAddInstanceDlg) {
aAddInstanceDlg = createNewDialog("a-addInstance-dlg");
aAddInstanceDlg.addButton('Reset', resetForm, aAddInstanceDlg);
aAddInstanceDlg.addButton('Save', function() {

/*
var adelNewContact = new NewContact({lastname:lastname_tf.getValue(),
firstname:firstname_tf.getValue(),
company: company_tf.getValue(),
phone:phone_tf.getValue(),
fax:fax_tf.getValue(),
email:email_tf.getValue(),
birthdate:birthdate_tf.getValue()});

var jsonData = "[{ lastname:" + lastname_tf.getValue() + ", " +
"firstname:" + firstname_tf.getValue() + ", " +
"company:" + company_tf.getValue() + ", " +
"phone:" + phone_tf.getValue() + ", " +
"fax:" + fax_tf.getValue() + ", " +
"email:" + email_tf.getValue() + ", " +
"birthdate:" + birthdate_tf.getValue() + "}]";
*/

// submit now... all the form information are submit to the server
// handle response after that...
if (form_instance_create.isValid()) {
form_instance_create.submit({
waitMsg:'Creating new contact now...',
reset: false,
scope:form_instance_create,
failure: function(form_instance_create, action) {
Ext.MessageBox.alert('Error Message', action.result.errorInfo);
},
success: function(form_instance_create, action) {
ds.load({params:{start:0, limit:myPageSize, test:GSO /*, addData:jsonData*/}});
aAddInstanceDlg.hide();
//Ext.MessageBox.alert('Confirm', action.result.info);
//ds.add(aNewContact);
}
});
}else{
Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');
}
});

var layout = aAddInstanceDlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title: 'create contact'}));
layout.endUpdate();

aAddInstanceDlg.show();
};
}

/************************************************************
* Form information - pop-up dialog
* turn on validation errors beside the field globally
************************************************************/
Ext.form.Field.prototype.msgTarget = 'side';
Ext.form.Field.prototype.height = 20;
Ext.form.Field.prototype.fieldClass = 'text-field-default';
Ext.form.Field.prototype.focusClass = 'text-field-focus';
Ext.form.Field.prototype.invalidClass = 'text-field-invalid';

/************************************************************
* Create new form to hold user enter information
* This form is used to create new instance
************************************************************/
var lastname_tf = new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'lastname'
});
var firstname_tf = new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'firstname'
});
var company_tf = new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company'
});
var phone_tf = new Ext.form.TextField({
fieldLabel: 'Phone',
name: 'phone'
});
var fax_tf = new Ext.form.TextField({
fieldLabel: 'Fax',
name: 'fax'
});
var email_tf = new Ext.form.TextField({
fieldLabel: 'eMail',
name: 'email',
vtype:'email'
});
var birthdate_tf = new Ext.form.DateField({
fieldLabel: 'Birth Date',
name: 'birthdate',
format: 'd/m/Y'
});
var form_instance_create = new Ext.form.Form({
labelAlign: 'right',
URL:'http://localhost/extjs/examples/gagri/contacts.php?action=createContact'
});

form_instance_create.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
form_instance_create.fieldset(
{id:'desc', legend:'Please fill the field'},
lastname_tf,
firstname_tf,
company_tf,
phone_tf,
fax_tf,
email_tf,
birthdate_tf
);

form_instance_create.applyIfToFields({width:255});
form_instance_create.render('a-addInstance-form');
form_instance_create.end();

resetForm = function() {
lastname_tf.setValue('');
firstname_tf.setValue('');
company_tf.setValue('');
phone_tf.setValue('');
fax_tf.setValue('');
email_tf.setValue('');
birthdate_tf.setValue('');
};

/************************************************************
* Create form to hold user enter information
* This form is used to update current instance
************************************************************/
var lastname_show = new Ext.form.TextField({
// labelStyle: 'display: none',
fieldLabel: 'Last Name',
name: 'lastname',
readOnly: false
});
var firstname_show = new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'firstname'
});
var company_show = new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company'
});
var phone_show = new Ext.form.TextField({
fieldLabel: 'Phone',
name: 'phone'
});
var fax_show = new Ext.form.TextField({
fieldLabel: 'Fax',
name: 'fax'
});
var email_show = new Ext.form.TextField({
fieldLabel: 'eMail',
name: 'email',
vtype:'email'
});
var birthdate_show = new Ext.form.DateField({
fieldLabel: 'Birthdate',
name: 'birthdate',
format: 'd/m/Y'
});
var form_instance_update = new Ext.form.Form({
labelAlign: 'right',
url:'http://localhost/extjs/examples/gagri/contacts.php?action=updateContact'
});

form_instance_update.column({width: 430, labelWidth:120, style:'margin-left:8px;margin-top:8px'});
form_instance_update.fieldset(
{id:'', legend:'Please update the field'},
lastname_show,
firstname_show,
company_show,
phone_show,
fax_show,
email_show,
birthdate_show
);

form_instance_update.applyIfToFields({width:255});
form_instance_update.render('a-updateInstance-form');
form_instance_update.end();
});

[fantony]

i am working with the same example and did not have problems saving a new record created. I think your problem is related to the json data created. Try to see what is being posted and what comes back from the server call using firebug.

I got all aspects of this example working except for the update of a record when a row in the grid is double clicked. I do not get any errors and the data is transferred correctly - however the dialog box does not open. I am using XML and not JSON - anyone help me please.

[jay@moduscreate.com]

you guys need to post in the help section!

[ghoz]

The problem was the following:

var form_instance_create = new Ext.form.Form({
labelAlign: 'right',
URL:'http://localhost/extjs/examples/gagri/contacts.php?action=createContact'
});

The url key was defined in capital letters. As Javascript is case sensitive, further Ext calls could not find the url key spelled using small letters.

Thanks for those who tried to help here.

[jay@moduscreate.com]

ghoz, when you post code, use PHP tags or CODE Tags.