Local Storage implementation - forms

Question

I am trying to load a form and save the form details in the local storage.
I am not quite sure how i should go about it.
Any suggestions are helpful.
This is my form whose data i need to save.
var count = 3; // count to control the maximum number of selections
//Configuration class definition
Ext.define("InfoImage.view.configure.Settings",{
extend : 'Ext.form.Panel',
requires : [
//'InfoImage.view.workItemPanel',
'Ext.TitleBar', 'Ext.field.Text', 'Ext.field.Toggle',
'Ext.field.Select', 'Ext.layout.HBox',
'Ext.field.Number', 'Ext.field.Checkbox',
'Ext.form.FieldSet', 'Ext.field.Password',
'Ext.field.Url' ],
xtype : 'settingsPanel',
id : 'settings',
config : {
//store:'configStore',
scrollable : {
direction : 'vertical'
},
items : [
{
xtype : 'toolbar',
ui : 'dark',
docked : 'top',
title : 'InfoImage Settings',
items : [
{
xtype : 'button',
iconCls : 'delete2',
iconMask : true,
ui : 'normal',
id : 'homeSettingbtn'
},
{xtype: 'spacer'},
{
xtype : 'button',
//text:'Save',
iconCls : 'save_fin',
iconMask : true,
ui : 'normal',
id : 'savebtn',
handler : function() {
//console.log('hi');
//var form = Ext.getCmp('settings').getValues().validate();
//form.validate();
// var errors = form.validate();
//console.log(form.isValid());
}
},
{
xtype : 'button',
//text:'Default',
iconCls : 'default',
iconMask : true,
ui : 'normal',
handler : function() {
var form = Ext.getCmp('settings');
form.reset();
}
}
]
},
{
//fieldset defined for the Server Configuration details to be entered.
xtype : 'fieldset',
title : 'Server Configuration',
defaults : {
xtype : 'selectfield',
labelWidth : '30%',
},
items : [
{
xtype : 'urlfield',
name : 'servname',
id : 'servname',
label : 'Server Name',
labelWidth : '30%'
},
{
xtype : 'numberfield',
id : 'port',
name : 'port',
label : 'Port',
value : '80',
labelWidth : '30%'
},
{
xtype : 'selectfield',
name : 'protocol',
id : 'protocol',
label : 'Protocol',
labelWidth : '30%',
usePicker : false,
handler : function() {
},
options : [ {
text : 'HTTP',
value : 'HTTP'
}, {
text : 'HTTPS',
value : 'HTTPS'
}
]
}
]
},
{
//fieldset defined for the User Configuration details to be entered.
xtype : 'fieldset',
title : 'User Configuration',
items : [ {
xtype : 'textfield',
name : 'username',
id : 'username',
label : 'User Name',
labelWidth : '30%'
}, {
xtype : 'passwordfield',
name : 'password',
id : 'password',
label : 'Password',
labelWidth : '30%'
}, {
xtype : 'textfield',
id : 'domain',
name : 'domain',
label : 'Domain',
labelWidth : '30%'
} ]
},
{
//fieldset defined for the Work Item display attributes to be checked.
xtype : 'fieldset',
id:'check',
title : '<div class="appconfig"><div>App Configuration</div>'
+ '<br /><div style="font-size: 14px;font-weight: bold;">Work Item display attributes</div></div>',
defaults : {
xtype : 'checkboxfield',
labelWidth : '30%'
},
items : [
{
name : 'domainname',
id : 'c1',
value : 'domainname',
label : 'Domain Name',
listeners : {
check : function() {
var obj1 = Ext
.getCmp('c1');
if (obj1.isChecked()) {
obj1.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj1.uncheck();
count--;
}
}
},
uncheck : function() {
var obj1 = Ext
.getCmp('c1');
if (!obj1.isChecked()) {
obj1.uncheck();
count--;
}
}
}
},
{
name : 'objectid',
id : 'c2',
value : 'objectid',
label : 'Object ID',
checked : 'true',
listeners : {
check : function() {
var obj2 = Ext
.getCmp('c2');
if (obj2.isChecked()) {
obj2.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj2.uncheck();
count--;
}
}
},
uncheck : function() {
var obj2 = Ext
.getCmp('c2');
if (!obj2.isChecked()) {
obj2.uncheck();
count--;
}
}
}
},
{
name : 'servername',
id : 'c3',
value : 'servername',
label : 'Server Name',
listeners : {
check : function() {
var obj3 = Ext
.getCmp('c3');
if (obj3.isChecked()) {
obj3.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj3.uncheck();
count--;
}
}
},
uncheck : function() {
var obj3 = Ext
.getCmp('c3');
if (!obj3.isChecked()) {
obj3.uncheck();
count--;
}
}
}
},
{
name : 'workitemname',
id : 'c4',
value : 'workitemname',
label : 'WorkItem Name',
checked : 'true',
listeners : {
check : function() {
var obj4 = Ext
.getCmp('c4');
if (obj4.isChecked()) {
obj4.check();
count++;
if (count > 3) {
Ext.Msg
.alert(
'InfoImage',
'Please choose only three fields',
Ext.emptyFn);
obj4.uncheck();
count--;
}
}
},
uncheck : function() {
var obj4 = Ext
.getCmp('c4');
if (!obj4.isChecked()) {
obj4.uncheck();
count--;
}
}
}
} ]
},
{
//fieldset defined for the App Subtitle to be entered.
xtype : 'fieldset',
items : [ {
xtype : 'textfield',
name : 'apptitle',
id : 'apptitle',
label : 'App Subtitle',
labelWidth : '30%',
value : 'Mobile Client Work Manager'
} ]
}
]
}
});
Do i need to create model and store? how do i get the values and store it?

Answer 1

Here's how you declare your store :
Ext.define('App.store.Items', {
extend: 'Ext.data.Store',
requires:"Ext.data.proxy.LocalStorage",
config: {
proxy: {
type: 'localstorage',
id: 'application-items'
},
autoLoad: true,
model: 'App.model.Item',
}
});
Here's the model
Ext.define('App.model.Item', {
extend: 'Ext.data.Model',
config: {
fields: [
'field1',
'field2'
]
}
});
Then, to add an item to the store :
store.add({field1:'value1',field2:'value2'});
store.sync();
Hope this helps

Answer 2

http://nareshtank.blogspot.in/2012/03/html-5-localstorage-usefull-methods.html