PDA

View Full Version : Problem loading form: Cannot read property "OffsetBoundary of undefined"



vaskito
25 Aug 2011, 10:54 AM
So I have a form and its respective store. The store works fine and it keeps the data in localStorage, but when I open the app again and try to update the form with the data from localStorage it doesn't work!

Any help would be much appreciated!



...
var optionsModel = new Ext.regModel('Options',{
fields: [ {name:'id', type:'int'}, 'language', 'range', 'limit', 'filters'],
proxy: { type: 'localstorage', id: 'options' }
});
...

Options = new Ext.Panel({
id: 'options',
floating: true,
hidden: true,
scroll: 'vertical',
hideOnMaskTap: false,
width:'50%',
autoHeight:true,
style:'min-width:300px;',
items: [{
title: 'Options',
xtype: 'form',
id: 'optionsForm',
items: [{
xtype: 'hiddenfield',
name: 'id',
value: 1
},{
xtype: 'fieldset',
title: 'Language',
defaults: {
labelWidth: '65%'
},
items: [{
xtype: 'selectfield',
name: 'language',
value: 'EN',
labelWidth: 0,
options: [{
text: 'English',
value: 'EN',
selected:true
}, {
text: 'Português',
value: 'PT'
}]
}]
},{
xtype: 'fieldset',
title: 'Limits',
defaults: {
// labelAlign: 'right'
labelWidth: '40%',
xtype: 'sliderfield',
},
items: [{
name: 'range',
label: 'Range',
value:1,
increment:1,
minValue: 1,
maxValue: 10
},{
name: 'limit',
label: 'Limit',
value:25,
increment:5,
minValue: 10,
maxValue: 50
}]
}],
store: new Ext.data.Store({
storeId: 'OptionsStore',
model: 'Options',
}),
/**
* Add custom event listener
*/
addEventListener: function(){
Options.on('beforeshow',this.loadSettings,this);
Options.on('beforehide',this.saveAction,this);
},

/**
* load user settings from store in the form
*/
loadSettings: function(){
this.store.load();
var data = this.store.getAt(0).data;
if (Ext.isObject(data)) {
var conf = Ext.ModelMgr.create({
id:1,
language: data.language,
limit: data.limit,
range: data.range
},
'Options'
);
console.log(data);
this.setValues({filters:"",id:1,language:"PT",limit:25,range:10}); // I've tried this.load() too.
}
},


/**
* Save form user settings model in store
*/
saveAction: function() {
var data = this.getValues();
var conf = Ext.ModelMgr.create({
id:1,
language: data.language,
limit: data.limit,
range: data.range
},
'Options'
);
this.store.loadData([]);
this.store.sync();
this.store.add(conf);
this.store.sync();
}
}]
});
...
Home.on('activate',function(){
Options.getComponent('optionsForm').addEventListener();
},this,{single:true});
...

vaskito
31 Aug 2011, 7:15 AM
As it turns out, the frameworks is still a bit buggy when it comes to forms and their respective input fields. I ended up creating JSON files to store the data for the translations and used an Ext.Sheet to mask out the Options panel (overcoming another bug). Code below..




...


function include(filename)
{
var head = document.getElementsByTagName('head')[0];


script = document.createElement('script');
script.src = filename;
script.type = 'text/javascript';


head.appendChild(script)
}


var text = new Array();


include('app/lang/en.js'); // JSON file with English translation
include('app/lang/pt.js'); // JSON file withe Portuguese translation


function langText(lang,el) {
return text[lang][el];
}


...


var OptionsStorage = JSON.parse(window.localStorage.getItem('f2t-options'));
if(OptionsStorage == null) { //load defaults
OptionsStorage = new Object();
OptionsStorage.language = "EN";
}
window.localStorage.setItem('f2t-options',JSON.stringify(OptionsStorage));


Ext.apply(Ext.MessageBox.YES, {text: langText(OptionsStorage.language,'Yes')});
Ext.apply(Ext.MessageBox.NO, {text: langText(OptionsStorage.language,'No')});


...


var OptionsMask = new Ext.Sheet({
modal:false,
fullscreen:true,
stretchX: true,
stretchY: true,
style:'background:rgba(0,0,0,0.3) !important;', //style like a mask
addEventListener: function(){
this.el.on('click',function(){Options.hide();});
}
});


var Options = new Ext.Panel({
id: 'options',
floating: true,
modal: false,
hideOnMaskTap: false,
listeners:{
beforeshow: function(){
OptionsMask.show();
},
afterrender: function(){
OptionsMask.addEventListener();
},
hide: function(){
OptionsMask.hide();
updateNearby();
}
},
items: [{
xtype: 'form',
id: 'optionsForm',
items: [{
xtype: 'fieldset',
title: langText(OptionsStorage.language,'Language'),
items: [{
xtype: 'selectfield',
name: 'language',
value: OptionsStorage.language,
options: [{
text: 'English',
value: 'EN',
selected: (this.value == OptionsStorage.language)?true:false
}, {
text: 'Português',
value: 'PT',
selected: (this.value == OptionsStorage.language)?true:false
}],
listeners:{
change: function(){
Options.getComponent('optionsForm').saveAction();


// TRANSLATE STUFF
}
}
}]
}]
}]
}],
/**
* Save user settings in localstorage
*/
saveAction: function() {
var data = this.getValues();
OptionsStorage = new Object();
OptionsStorage.language = data.language;


window.localStorage.removeItem('f2t-options');
window.localStorage.setItem('f2t-options',JSON.stringify(OptionsStorage));;
}
}]
});