PDA

View Full Version : Store throws "TypeError: Con is not a constructor" error



phamtranquocviet
14 Jun 2013, 5:02 PM
Hi,

I have a grid of children. There is an "Add Child" button at the bottom of the grid. When "add" button is clicked, a form within a window shows up for adding. Clicking the "Add child" button in the form is supposed to add the child to store of the grid whose storage type is "sessionstorage".

I am currently getting an error when "Add Child" button is clicked, can't find a way to solve, and need help:

TypeError: Con is not a constructor
return new Con(config, id);




Here is the code:

Ext.onReady(function() {
Ext.create('Ext.container.Container', {
layout: {
type: 'vbox',
align: 'center'
},
style: {
marginLeft: 'auto',
marginRight: 'auto'
},
items: [
Ext.create('Ext.form.FormPanel', {
title: 'Letter of Intent',
url: 'save-form.php',
layout: 'form',
bodyPadding: 5,
width: 700,
margin: '5 5 0 5',

items: [
getParentsUi(),
getChildrenUi(),
getQuestionsUi()
],
buttons: getButtonsUi(),
})
],
renderTo: Ext.getBody(),
});
});


function getChildrenUi() {
return {
xtype: 'fieldset',
title: "<span style='font-weight:bold'>Children Information</span>",
checkboxToggle: false,
layout: 'anchor',
items: [
Ext.create('Ext.grid.Panel', {
height: 130,
sortableColumns: false,
enableColumnHide: false,
margin: '0 0 8 0',
store: Ext.create("Ext.data.Store", {
proxy: { type: 'sessionstorage' },
storeId:"children-store",
model: 'Child',
autoLoad: false, buffered: true
}),
columns: [
new Ext.grid.RowNumberer(),
{ text: 'First Name', dataIndex: 'firstName' },
{ text: 'Last Name', dataIndex: 'lastName' },
{ text: 'Age', dataIndex: 'age' },
{ text: 'Gender', dataIndex: 'gender' },
{ text: 'Grade Entering', dataIndex: 'gradeEntering' },
{ text: 'Date of Birth', dataIndex: 'dob', flex: 1 }
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{xtype: 'label', id: 'children-error', cls: 'error'},
'->',
getAddChildUi(),
{xtype: 'button', text: 'Edit Child', id: 'children-edit'},
{xtype: 'button', text: 'Delete Child', id: 'children-delete'}
]
}]
})
]
};
}



Ext.define('Child', {
extends: 'Ext.data.Model',
idProperty: "childId",

fields:[
{name: "childId", type: "int"},
{name: "firstName", type: "string"},
{name: "lastName", type: "sring"},
{name: "age", type: "int"},
{name: "gender", type: "sring"},
{name: "gradeEntering", type: "int"},
{name: "dateOfBirth", type: "sring"}
]
});


function getAddChildUi() {
return {
xtype: 'button',
text: 'Add Child',
id: 'add-child-button',

handler: function(button, event) {
var window;

window = Ext.ComponentQuery.query('add-child-window');
if(window.length > 0 ) {
window[0].toFront(true);
return;
}

window = getAddChildWindow();
window.showAt(event.getXY());
}
};
}




function handleAddChild(addButton, event) {
var window, form, store, child;

window = addButton.up("window");
form = window.down("form").getForm();
if(!form.isValid()) {
return;
}

child = Ext.create('Child', form.getValues());
console.log(child); => this shows the Child object, but passed-in data is not found
store = Ext.StoreManager.lookup("children-store");
try {
store.add(child);
} catch (error) {
console.log(error); => error is showned below in red
}
}

TypeError: Con is not a constructor
return new Con(config, id);



I am using Ext.onRready and all the above code are within <script>...</script> tags because this is a standalone page. Much like a registration page. It does not belong to the application which is in MVC.


I have tried all I could and am really needing help. Thanks in advance.

slemmon
16 Jun 2013, 11:21 PM
What do you get if you do console.log(form.getValues()); prior to creating the child record? Does the form in the AddChildWindow have fields with names corresponding to the fields in your child record?

phamtranquocviet
17 Jun 2013, 4:52 AM
Thanks for the reply. I should have provided that info.


Yes, console.log(form.getValues()) shows an object containing all the field expected in the model.

Here is the output:
{dateOfBirth: "06/17/2013", firstName: "Quyen", gender: "male", gradeEntering: "1", lastName: "Nguyen"}

slemmon
17 Jun 2013, 1:05 PM
Oh, I just noticed that you have extends instead of extend when defining Child:


Ext.define('Child', { //extends: 'Ext.data.Model',
extend: 'Ext.data.Model',
idProperty: "childId",


fields: [{
name: "childId",
type: "int"
}, {
name: "firstName",
type: "string"
}, {
name: "lastName",
type: "sring"
}, {
name: "age",
type: "int"
}, {
name: "gender",
type: "sring"
}, {
name: "gradeEntering",
type: "int"
}, {
name: "dateOfBirth",
type: "sring"
}]
});

phamtranquocviet
17 Jun 2013, 8:37 PM
Thanks for the help.

Yes, that was the mistake. I can now see data in Child object. However, the sync function throws an error:



function handleAddChild(addButton, event) {
var window, form, store, child;

window = addButton.up("window");
form = window.down("form").getForm();
if(!form.isValid()) {
return;
}

child = Ext.create('Child', form.getValues());
store = Ext.StoreManager.lookup("children-store");
store.add(child);
console.log(store); => firebug shows that store does not have field "items" under field "data"
store.sync(); => see error below
console.log(store.getCount());
}

TypeError: this.data.filterBy is not a function
return this.data.filterBy(this.filterNew).items;

changing storage type from sessionstorage to localstorage does not help either.
If I take store.sync() out, no errors.
However, store.getCount() results in 0.
All this works fine in MVC app. Wonder why?

Thanks for you help.

phamtranquocviet
18 Jun 2013, 7:03 AM
Hi,

It turns out I cannot use "buffered" for "localstorage" (see http://www.sencha.com/forum/showthread.php?251498-4.2.0-Ext.data.Store.getById%28%29-error). So, I changed my store definition from:



store: Ext.create("Ext.data.Store", {
proxy: { type: 'localstorage' },
storeId:"children-store",
model: 'Child',
autoLoad: false,
buffered: true <= Taken out
}),


to:



store: Ext.create("Ext.data.Store", {
proxy: { type: 'localstorage' },
storeId:"children-store",
model: 'Child',
autoLoad: false
}),


And the error went away. Thanks for all your help.