Sencha Touch：加载表单时出现问题：无法读取属性“未定义的 OffsetBoundary”

Question

所以我有一个表格和它各自的商店。商店运行良好，并将数据保存在 localStorage 中，但是当我再次打开应用程序并尝试使用 localStorage 中的数据更新表单时，它不起作用！

任何帮助将不胜感激！

...
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});
...

Answer 1

事实证明，这些框架在表单及其各自的输入字段方面仍然存在一些问题。我最终创建了 JSON 文件来存储翻译数据，并使用 Ext.Sheet 屏蔽了“选项”面板（克服了另一个错误）。下面的代码..

...

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));;
            }
        }]
       });