PDA

View Full Version : Loading a FormPanel with data from a Store backed by a LocalstorageProxy?



stefankendall
17 Sep 2011, 7:59 PM
How do you load values into a FormPanel with data from a store backed by localstorage? I've built a live example of my problem here (http://www.stefankendall.com/files/stackoverflow/broken/test.html). I tried to cook the smallest example of the problem I'm having.

Here's all of the relevant code:

Ext.ns('app', 'app.defaults');
Ext.regModel('MyModel', {
fields: [
{name: 'var1', type: 'integer'}
]
});
app.defaults.vars = {
var1: 5
};


var MyPanel = Ext.extend(Ext.Panel, {
title: 'Vals',
iconCls: 'bookmarks',
initComponent: function() {
var myForm = new Ext.form.FormPanel({
id: 'my-form',
scroll: 'vertical',
items: [
{
xtype: 'fieldset',
defaults: {
labelWidth: '35%'
},
items: [
{
xtype: 'numberfield',
id: 'var1',
name: 'var1',
label: 'Var1',
placeHolder: '100',
useClearIcon: true
}
]
}
]
});


var myStore = new Ext.data.Store({
model: 'MyModel',
proxy: {
type: 'localstorage',
id: 'model-proxy'
},
listeners: {
load: function(store, records, successful) {
if (this.getCount() > 1) {
alert('Error: More than one record is impossible.');
this.proxy.clear();
}
if (this.getCount() == 0) {
alert( "Count 0, loading defaults");
this.add(app.defaults.vars);
this.sync();
}


console.log("Attempting to load store");
myForm.load(this);
}
},
autoLoad: true,
autoSave: true
});


this.items = [myForm];
MyPanel.superclass.initComponent.call(this);
}
});

existdissolve
18 Sep 2011, 4:57 PM
Hi @stefankendall--

When using load() (or loadRecord()), be sure that you're passing a model instance to load. So instead of:


myForm.load(this);

try a model instance instead:


myForm.load(records[0]);

You'll probably want to more precisely identify the data record that you want to load into the form, but that should populate the formfields that match your model's fields with the appropriate values from the passed model instance.

stefankendall
18 Sep 2011, 8:48 PM
Yup, that was the issue. Unfortunately now only the first page load saves correctly. All subsequent loads are saving data into
model-proxy-undefined instead of [CODE]model-proxy-1[CODE], which is created on first page load. I guess I'll have to post a new topic about this.

I'm only loading the first and only record as I'm saving one set of data, kind of like a single user's information.

existdissolve
19 Sep 2011, 2:54 AM
How are you saving the data on subsequent loads? I have an app that does something similar. The way I approach it is that I have a generic method in my controller that takes the form data when the form is saved and checks the store to see if a record exists. If it does, I update the model instance with the new data, and if it doesn't exist I create a new model instance and save it to the store. Here's what mine looks like:



savesetting: function(name,value) {
var store = this.getSettingsStore();
var match = store.find("name",name);
// record doesn't exist; create new record
if (match == -1) {
this.addsetting(name,value);
}
// record exists; update existing record
else {
this.updatesetting(name,value);
}
},
addsetting: function(name,value) {
var store = this.getSettingsStore();
var setting = Ext.ModelMgr.getModel('Gloss.model.Setting');
var newrecord = new setting({
name: name,
value: value
});
store.add(newrecord);
store.sync();
},
updatesetting: function(name,value) {
var store = this.getSettingsStore();
var idx = store.find("name",name);
var record = store.getAt(idx);
// set the new values;
record.set("value",value);
store.sync();
}

stefankendall
19 Sep 2011, 5:35 PM
I think that's what I'm doing, although if it works for you, clearly something is up. I've posted the question on stackoverflow (http://stackoverflow.com/questions/7479113/extjs-senchatouch-localstorage-updates-only-work-on-first-page-load), and I'll ask it here as its own question.