Sencha Touch : 양식로드 문제 : "OffsetBoundary undefined"속성을 읽을 수 없습니다.

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