Local Storage in Form Field [Archive]

moonpeep

14 Dec 2011, 3:04 PM

I'm trying make a very simple app to record student test scores and make goals.

I want to use local storage to save fields permanently - no need for submitting or retrieving the text, I just want it to persist on the page.

I'm sure this is simple, but I haven't had any success. My code for the first test is below. Any help would be greatly appreciated!

Ext.application({
name: 'MyData@Brown',

launch: function() {

Ext.regStore('store', {
proxy: {
type: 'localstorage'
}
});

Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBar : {
layout : {
pack : 'center'
}
},
tabBarPosition: 'top',

items: [

{
xtype: 'nestedlist',
title: 'Scantron',

items: [
{
xtype: 'fieldset',

items: [
{
xtype: 'textfield',
label: 'Fall Score',
name: 'srfs',
store: 'store'
},
{
xtype: 'textfield',
label: 'Winter Goal',
name: 'srwg'
},
{
xtype: 'textfield',
label: 'Winter Score',
name: 'srws',
},
{
xtype: 'textfield',
label: 'Did you meet your goal?',
name: 'srwyn'
}
]
},
]
}

]
});
}
});

todos27

15 Dec 2011, 12:18 AM

Hi,

Jorge from miamicoder.com has a tutorial about creating a notes application on Sencha Touch. He uses form and there are stored on local storage.

Have a look to his tutorial, might give you some inspiration.

http://miamicoder.com/2011/writing-a-sencha-touch-application-part-1/
(http://miamicoder.com/2011/writing-a-sencha-touch-application-part-1/)

moonpeep

15 Dec 2011, 6:17 AM

Thanks for the reply. I've looked at Jorge's tutorial. Problem is, I'm such a novice that I wasn't able to extract the parts that were relevant to me. With notes and most other applications local storage is used to submit and retrieve data. I don't want to do either of those things. I just want the text to stay in each form field - like a document that is auto-saved. I could just have students make notes, but I want to give it structure and labels. Is there a simple way to do this?

moonpeep

15 Dec 2011, 5:10 PM

Well, this is my completed code, minus the actual functionality of saving the text... This would make a big difference at my school in helping students take responsibility for their progress. But implementing local storage just seems to be beyond me.

Please help!

Ext.application({
name: 'MyData',

launch: function() {

Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBar : {
layout : {
pack : 'center'
}
},
tabBarPosition: 'top',

items: [

//SCANTRON BEGIN

{
xtype: 'nestedlist',
title: 'Scantron',

items: [

{
xtype: 'formpanel',
items: [

{
html: [
'<h1>READING<br><hr><br></h1>'
].join("")
},
{
xtype: 'numberfield',
label: 'Fall Score',
name: 'srfs',
placeHolder: 'enter your score',
},
{
xtype: 'numberfield',
label: 'Winter Goal',
name: 'srwg',
placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'srwga',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: 'Winter Score',
name: 'srws',
placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'srwyn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
xtype: 'numberfield',
label: 'Spring Goal',
name: 'srsg',
placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'srsga',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: 'Spring Score',
name: 'srss',
placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'srwyn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
html: [
'<br><br><br><h1>MATH</h1><hr><br>'
].join("")
},
{
xtype: 'numberfield',
label: 'Fall Score',
name: 'smfs',
placeHolder: 'enter your score',
},
{
xtype: 'numberfield',
label: 'Winter Goal',
name: 'smwg',
placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'smwga',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: 'Winter Score',
name: 'smws',
placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'smwyn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
xtype: 'numberfield',
label: 'Spring Goal',
name: 'smsg',
placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'smsga',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: 'Spring Score',
name: 'smss',
placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'smwyn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
}
]
},
]
},

//SCANTRON END

//ISAT BEGIN
{
xtype: 'nestedlist',
title: 'ISAT',

items: [
{
xtype: 'formpanel',

items: [
{
html: [
'<h1>READING<br><hr><br></h1>'
].join("")
},
{
xtype: 'numberfield',
label: 'Last year's Score',
name: 'irlys',

placeHolder: 'enter your score',
},
{
xtype: 'numberfield',
label: 'This year's goal Goal',
name: 'irtyg',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ira',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: 'This year's score',
name: 'irtys',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'iryn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
html: [
'<br><br><br><h1>MATH</h1><hr><br>'
].join("")
},
{
xtype: 'numberfield',
label: 'Last year's Score',
name: 'imlys',

placeHolder: 'enter your score'
},
{
xtype: 'numberfield',
label: 'This year's goal Goal',
name: 'imtyg',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ima',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: 'This year's score',
name: 'imtys',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'imyn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
}
]
},
]
},

//ISAT END

//COMMON CORE BEGIN

{
xtype: 'nestedlist',
title: 'Common Core',

items: [

{
xtype: 'formpanel',
items: [

{
html: [
'<h1>READING<br><hr><br></h1>'
].join("")
},
{
xtype: 'numberfield',
label: '1st Quater Score',
name: 'ccrq1s',

placeHolder: 'enter your score',
},
{
xtype: 'numberfield',
label: '2nd Quater Goal',
name: 'ccrq2g',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ccrq2a',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: '2nd Quater Score',
name: 'ccrq2s',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'ccrq2yn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
xtype: 'numberfield',
label: '3rd Quater Goal',
name: 'ccrq3g',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ccrq3a',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: '3rd Quater Score',
name: 'ccrq3s',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'ccrq3yn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
xtype: 'numberfield',
label: '4th Quater Goal',
name: 'ccrq4g',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ccrq4a',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: '4th Quater Score',
name: 'ccrq4s',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'ccrq4yn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
html: [
'<br><br><br><h1>MATH</h1><hr><br>'
].join("")
},
{
xtype: 'numberfield',
label: '1st Quater Score',
name: 'ccmq1s',

placeHolder: 'enter your score',
},
{
xtype: 'numberfield',
label: '2nd Quater Goal',
name: 'ccmq2g',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ccmq2a',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: '2nd Quater Score',
name: 'ccmq2s',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'ccmq2yn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
xtype: 'numberfield',
label: '3rd Quater Goal',
name: 'ccmq3g',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ccmq3a',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: '3rd Quater Score',
name: 'ccmq3s',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'ccmq3yn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
},
{
xtype: 'numberfield',
label: '4th Quater Goal',
name: 'ccmq4g',

placeHolder: 'enter your goal'
},
{
xtype: 'textareafield',
label: 'What will you do to reach your goal?',
name: 'ccmq4a',
placeHolder: 'write your action steps here'
},
{
xtype: 'numberfield',
label: '4th Quater Score',
name: 'ccmq4s',

placeHolder: 'enter your score'
},
{
xtype: 'selectfield',
name: 'ccmq4yn',
label: 'Did you meet your goal?',
placeHolder: 'yes or no?',
options: [{
text: '',
value: ''
}, {
text: 'Yes',
value: 'Yes'
}, {
text: 'No',
value: 'No'
}]
}
]
},
]
},

//COMMON CORE END

]
});
}
});

erikkurtu

23 Dec 2011, 9:35 AM

Did you ever figure this one out moonpeep? I'm looking for the same type of functionality.