ExtJS, SenchaTouch - FormPanel can't load values from a store? - sencha-touch

Question

How do you load values into a formpanel from a store? I've built an entire broken example here.
I'm not sure why my form fields aren't loaded.
The model:
Ext.ns('app', 'app.defaults');
Ext.regModel('MyModel', {
fields: [
{name: 'var1', type: 'integer'}
]
});
app.defaults.vars = {
var1: 5
};
The store:
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
});
The form:
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
}
]
}
]
});

Answer 1

I found other way to connect formpanel with the data
After the form is loaded insert following code
myForm.getForm().loadRecord(Ext.ModelManager.create({
'var1':5
}, 'MyModel'));
So, then, load a record instead of the store. Load records[0] instead of this.