PDA

View Full Version : Problem adding form data to localstorage



bamato
4 Jan 2011, 2:38 AM
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
4 Jan 2011, 4:54 AM
Note: The variables (les1,docent1,lokaal1 etc.) refer to the names of the formfields.

bamato
4 Jan 2011, 9:49 AM
Still waiting for a good answer ;)

VinylFox
4 Jan 2011, 10:22 AM
How are you populating those variables? (les1, docent1, etc.)

Take a look at the getValues method under FormPanel.

bamato
4 Jan 2011, 10:25 AM
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
5 Jan 2011, 2:53 AM
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
5 Jan 2011, 8:04 AM
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
5 Jan 2011, 9:06 AM
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
5 Jan 2011, 9:43 AM
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
5 Jan 2011, 10:56 AM
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 ;)