Problem adding form data to localstorage

[bamato]

Hello everyone,

We created the following code and we are not able to insert the data from the form into the localstorage.

Any suggestions on how to get this working?

Thanks in advance for your help!


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {


Ext.regModel('Les', {
fields: ['id', 'naam', 'docent', 'lokaal', 'dag', 'uur'],
});

var rooster = new Ext.data.Store({
autoLoad: true,
model: 'Les',
proxy: {
type: 'localstorage',
id : 'rooster'
}
});

var form1 = new Ext.form.FormPanel({
scroll: false,
standardSubmit : false,
items: [{
xtype: 'fieldset',
title: 'Maandag',
items: [{
xtype: 'textfield',
name : 'les1',
label: 'Les 1',
useClearIcon: true,
autoCapitalize : true
}, {
xtype: 'textfield',
name : 'docent1',
label: 'Docent',
useClearIcon: true,
autoCapitalize: true
}, {
xtype: 'textfield',
name : 'lokaal1',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les2',
label: 'Les 2',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent2',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal2',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les3',
label: 'Les 3',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent3',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal3',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les4',
label: 'Les 4',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent4',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal4',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les5',
label: 'Les 5',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent5',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal5',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les6',
label: 'Les 6',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent6',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal6',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les7',
label: 'Les 7',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent7',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal7',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les8',
label: 'Les 8',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent8',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal8',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les9',
label: 'Les 9',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent9',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal9',
label: 'Lokaal',
useClearIcon: true
}]
}, {
xtype: 'button',
text: 'Opslaan',
ui: 'action',
handler: function(){


vles1 = Ext.ModelMgr.create({
naam: les1,
docent: docent1,
lokaal: lokaal1,
dag: '1',
uur: '1'
}, 'Les');
rooster.add(vles1);

vles2 = Ext.ModelMgr.create({
naam: les2,
docent: docent2,
lokaal: lokaal2,
dag: '1',
uur: '2'
}, 'Les');
rooster.add(vles2);

vles3 = Ext.ModelMgr.create({
naam: les3,
docent: docent3,
lokaal: lokaal3,
dag: '1',
uur: '3'
}, 'Les');
rooster.add(vles3);

vles4 = Ext.ModelMgr.create({
naam: les4,
docent: docent4,
lokaal: lokaal4,
dag: '1',
uur: '4'
}, 'Les');
rooster.add(vles4);

vles5 = Ext.ModelMgr.create({
naam: les5,
docent: docent5,
lokaal: lokaal5,
dag: '1',
uur: '5'
}, 'Les');
rooster.add(vles5);

vles6 = Ext.ModelMgr.create({
naam: les6,
docent: docent6,
lokaal: lokaal6,
dag: '1',
uur: '6'
}, 'Les');
rooster.add(vles6);

vles7 = Ext.ModelMgr.create({
naam: les7,
docent: docent7,
lokaal: lokaal7,
dag: '1',
uur: '7'
}, 'Les');
rooster.add(vles7);

vles8 = Ext.ModelMgr.create({
naam: les8,
docent: docent8,
lokaal: lokaal8,
dag: '1',
uur: '8'
}, 'Les');
rooster.add(vles8);

vles9 = Ext.ModelMgr.create({
naam: les9,
docent: docent9,
lokaal: lokaal9,
dag: '1',
uur: '9'
}, 'Les');
rooster.add(vles9);

rooster.sync();
},
scope: this
}]

});




lessenWeergave = new Ext.Panel({
layout: 'fit',
scroll: 'vertical',
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Laden',
handler: function() {
var panel = lessenWeergave,
dataview = panel.items.first(),
store = 'rooster';

store.load();
}
}
]
}
],

items: [
{
xtype: 'dataview',

/*
* The XTemplate allows us to easily render the data from our User model, as well as
* iterating over each User's Orders and OrderItems:
*/
tpl: [
'<tpl for=".">',
'<div class="user">',
'<h3>{naam}\'s orders:</h3>',
'<tpl for="orders">',
'<div class="order" style="padding-left: 20px;">',
'Order: {id} ({lokaal})',
'<ul>',
'<tpl for="orderItems">',
'<li>{docent} x {naam}</li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>',
'</div>',
'</tpl>'
],

itemSelector: 'div.user',
styleHtmlContent: true,

store: 'rooster'
}
]
});


var paneelbottom = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
activeTab: 0,
fullscreen: true,
layoutOnTabChange: true,
ui: 'light',
cardSwitchAnimation: {
type: 'fade',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Overzicht',
html: '<h1>iClassroom</h1><p>Welkom op de testpagina van iClassroom.</p>',
iconCls: 'home',
cls: 'card1'
}, {
title: 'Lessen',
iconCls: 'rooster-icon',
icon: '../themes/images/default/pictos/calendar2.png',
items: form1,
cls: 'card2',
badgeText: '7',
anchor: '20%'
}, {
title: 'Huiswerk',
html: '<h1>Huiswerk</h1>',
cls: 'card3',
iconCls: 'bookmarks'
}, {
title: 'Projecten',
html: '<h1>Projecten</h1>',
cls: 'card4',
iconCls: 'team',
badgeText: '3'
}, {
title: 'Instellingen',
cls: 'card5',
items: lessenWeergave,
iconCls: 'settings'
}],
});
}
});

[bamato]

Note: The variables (les1,docent1,lokaal1 etc.) refer to the names of the formfields.

[bamato]

Still waiting for a good answer ;)

[VinylFox]

How are you populating those variables? (les1, docent1, etc.)

Take a look at the getValues method under FormPanel.

[bamato]

Ah that's the problem! I didn't define those, because I thought the library would inmediately assign the fieldnames to the corresponding variables. Thanks for your answer!

[bamato]

Currently I have this code, but still it isn't working (no data inserted, so no dataview):


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {


Ext.regModel('Les', {
fields: ['id', 'naam', 'docent', 'lokaal', 'dag', 'uur'],
});

var rooster = new Ext.data.Store({
autoLoad: true,
model: 'Les',
proxy: {
type: 'localstorage',
id : 'rooster'
}
});

var form1 = new Ext.form.FormPanel({
scroll: false,
standardSubmit : false,
items: [{
xtype: 'fieldset',
title: 'Maandag',
items: [{
xtype: 'textfield',
name : 'les1',
label: 'Les 1',
useClearIcon: true,
autoCapitalize : true
}, {
xtype: 'textfield',
name : 'docent1',
label: 'Docent',
useClearIcon: true,
autoCapitalize: true
}, {
xtype: 'textfield',
name : 'lokaal1',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les2',
label: 'Les 2',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent2',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal2',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les3',
label: 'Les 3',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent3',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal3',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les4',
label: 'Les 4',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent4',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal4',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les5',
label: 'Les 5',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent5',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal5',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les6',
label: 'Les 6',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent6',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal6',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les7',
label: 'Les 7',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent7',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal7',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les8',
label: 'Les 8',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent8',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal8',
label: 'Lokaal',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'les9',
label: 'Les 9',
margin: '10 0 0 0',
useClearIcon: true,
autoCapitalize: true

}, {
xtype: 'textfield',
name : 'docent9',
label: 'Docent',
useClearIcon: true
}, {
xtype: 'textfield',
name : 'lokaal9',
label: 'Lokaal',
useClearIcon: true
}]
}, {
xtype: 'button',
text: 'Opslaan',
ui: 'action',
handler: function(){


vles1 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les1),
docent: form1.getForm().getValue(docent1),
lokaal: form1.getForm().getValue(lokaal1),
dag: '1',
uur: '1'
}, 'Les');
rooster.add(vles1);

vles2 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les2),
docent: form1.getForm().getValue(docent2),
lokaal: form1.getForm().getValue(lokaal2),
dag: '1',
uur: '2'
}, 'Les');
rooster.add(vles2);

vles3 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les3),
docent: form1.getForm().getValue(docent3),
lokaal: form1.getForm().getValue(lokaal3),
dag: '1',
uur: '3'
}, 'Les');
rooster.add(vles3);

vles4 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les4),
docent: form1.getForm().getValue(docent4),
lokaal: form1.getForm().getValue(lokaal4),
dag: '1',
uur: '4'
}, 'Les');
rooster.add(vles4);

vles5 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les5),
docent: form1.getForm().getValue(docent5),
lokaal: form1.getForm().getValue(lokaal5),
dag: '1',
uur: '5'
}, 'Les');
rooster.add(vles5);

vles6 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les6),
docent: form1.getForm().getValue(docent6),
lokaal: form1.getForm().getValue(lokaal6),
dag: '1',
uur: '6'
}, 'Les');
rooster.add(vles6);

vles7 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les7),
docent: form1.getForm().getValue(docent7),
lokaal: form1.getForm().getValue(lokaal7),
dag: '1',
uur: '7'
}, 'Les');
rooster.add(vles7);

vles8 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les8),
docent: form1.getForm().getValue(docent8),
lokaal: form1.getForm().getValue(lokaal8),
dag: '1',
uur: '8'
}, 'Les');
rooster.add(vles8);

vles9 = Ext.ModelMgr.create({
naam: form1.getForm().getValue(les9),
docent: form1.getForm().getValue(docent9),
lokaal: form1.getForm().getValue(lokaal9),
dag: '1',
uur: '9'
}, 'Les');
rooster.add(vles9);

rooster.sync();
},
scope: this
}]

});




lessenWeergave = new Ext.Panel({
layout: 'fit',
scroll: 'vertical',
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Laden',
handler: function() {
var panel = lessenWeergave,
dataview = panel.items.first(),
store = rooster;

store.load();
}
}
]
}
],

items: [
{
xtype: 'dataview',

/*
* The XTemplate allows us to easily render the data from our User model, as well as
* iterating over each User's Orders and OrderItems:
*/
tpl: [
'<tpl for=".">',
'<div class="user">',
'<h3>{naam}\'s orders:</h3>',
'<tpl for="orders">',
'<div class="order" style="padding-left: 20px;">',
'Order: ({lokaal})',
'<ul>',
'<tpl for="orderItems">',
'<li>{docent} x {uur}</li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>',
'</div>',
'</tpl>'
],

itemSelector: 'div.user',
styleHtmlContent: true,

store: rooster
}
]
});


var paneelbottom = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
activeTab: 0,
fullscreen: true,
layoutOnTabChange: true,
ui: 'light',
cardSwitchAnimation: {
type: 'fade',
cover: true
},

defaults: {
scroll: 'vertical'
},
items: [{
title: 'Overzicht',
html: '<h1>iClassroom</h1><p>Welkom op de testpagina van iClassroom.</p>',
iconCls: 'home',
cls: 'card1'
}, {
title: 'Lessen',
iconCls: 'rooster-icon',
icon: '../themes/images/default/pictos/calendar2.png',
items: form1,
cls: 'card2',
badgeText: '7',
anchor: '20%'
}, {
title: 'Huiswerk',
html: '<h1>Huiswerk</h1>',
cls: 'card3',
iconCls: 'bookmarks'
}, {
title: 'Projecten',
html: '<h1>Projecten</h1>',
cls: 'card4',
iconCls: 'team',
badgeText: '3'
}, {
title: 'Instellingen',
cls: 'card5',
items: [{
width: Ext.is.Phone ? undefined : 300,
height: 500,
xtype: 'list',
store: rooster,
itemTpl: '<div class="contact"><strong>{naam}</strong> {lokaal}</div>'
}],
iconCls: 'settings'
}],
});
}
});

[VinylFox]

I specifically pointed you toward the getValues method of the FormPanel for a reason.

Please take a close look at the documentation for FormPanel, and make sure your looking at Touch docs, and not Ext JS docs. Are you using a debugger? I would be surprised if your code did not throw errors.

Hint: there is no getForm method in touch.

[bamato]

I understand. But using getValues(les1) for example also doesn't work because getValues returns an object containing all values. How to solve this?
Sorry for my low level of knowledge of this framework, since this is completely new to me.

[VinylFox]

First thing, why are you passing 'les1' as the argument to getValues? Please please please look at the documentation, the only argument to getValues is a boolean (true or false) value that would return only enabled fields if true was passed.

So if you read the docs (really, please read the docs) it tells you that getValues returns an object with all of your form fields names as properties of that object, and their values being the value of each of those properties.

With that in mind, you might want to do something like this:

var vals = form1.getValues(),
vles1 = Ext.ModelMgr.create({
naam: vals.les1,
docent: vals.docent1,
lokaal: vals.lokaal1,
dag: '1',
uur: '1'
}, 'Les');
rooster.add(vles1);

Notice that I placed the result of getValues into the variable 'vals' then I used a dot and the field name to retrieve the specific value. So if my field was named 'foo' I would use 'vals.foo' to get the value.

A good JavaScript book would be a great idea for you - I typically suggest Object Oriented JavaScript (http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=viny07-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141).

[bamato]

Thanks for your reply, now I realise what I did wrong. I knew that inserting 'les1' as argument for getValues wouldn't work, but I tried a few things and posted my last try in this post.

Thanks for helping me out! I will look for some more tutorials and might even buy that book ;)