2012-05-26 81 views
1

我想加載一個窗體並將窗體細節保存在本地存儲中。本地存儲實現

我不太確定我該怎麼去做。

任何建議是有幫助的。

這是我需要保存的數據。

var count = 3; // count to control the maximum number of selections 

//Configuration class definition 
Ext.define("InfoImage.view.configure.Settings",{ 
        extend : 'Ext.form.Panel', 
        requires : [ 
        //'InfoImage.view.workItemPanel', 
        'Ext.TitleBar', 'Ext.field.Text', 'Ext.field.Toggle', 
          'Ext.field.Select', 'Ext.layout.HBox', 
          'Ext.field.Number', 'Ext.field.Checkbox', 
          'Ext.form.FieldSet', 'Ext.field.Password', 
          'Ext.field.Url' ], 
        xtype : 'settingsPanel', 
        id : 'settings', 
        config : { 
         //store:'configStore', 
         scrollable : { 
          direction : 'vertical' 
         }, 
         items : [ 
           { 
            xtype : 'toolbar', 
            ui : 'dark', 
            docked : 'top', 
            title : 'InfoImage Settings', 
            items : [ 
            { 
             xtype : 'button', 
             iconCls : 'delete2', 
             iconMask : true, 
             ui : 'normal', 
             id : 'homeSettingbtn' 
            }, 

            {xtype: 'spacer'}, 
            { 
             xtype : 'button', 
             //text:'Save', 
             iconCls : 'save_fin', 
             iconMask : true, 
             ui : 'normal', 
             id : 'savebtn', 
             handler : function() { 
              //console.log('hi'); 
              //var form = Ext.getCmp('settings').getValues().validate(); 
              //form.validate(); 
             // var errors = form.validate(); 
              //console.log(form.isValid()); 
             } 
            }, 
            { 
             xtype : 'button', 
             //text:'Default', 
             iconCls : 'default', 
             iconMask : true, 
             ui : 'normal', 
             handler : function() { 
              var form = Ext.getCmp('settings'); 
              form.reset(); 
             } 

            } 

            ] 
           }, 

           { 
            //fieldset defined for the Server Configuration details to be entered. 
            xtype : 'fieldset', 
            title : 'Server Configuration', 
            defaults : { 
             xtype : 'selectfield', 
             labelWidth : '30%', 
            }, 
            items : [ 
              { 
               xtype : 'urlfield', 
               name : 'servname', 
               id : 'servname', 
               label : 'Server Name', 
               labelWidth : '30%' 
              }, 
              { 
               xtype : 'numberfield', 
               id : 'port', 
               name : 'port', 
               label : 'Port', 
               value : '80', 
               labelWidth : '30%' 
              }, 
              { 
               xtype : 'selectfield', 
               name : 'protocol', 
               id : 'protocol', 
               label : 'Protocol', 
               labelWidth : '30%', 
               usePicker : false, 
               handler : function() { 
               }, 
               options : [ { 
                text : 'HTTP', 
                value : 'HTTP' 
               }, { 
                text : 'HTTPS', 
                value : 'HTTPS' 
               } 

               ] 
              } 

            ] 
           }, 
           { 
            //fieldset defined for the User Configuration details to be entered. 
            xtype : 'fieldset', 
            title : 'User Configuration', 
            items : [ { 
             xtype : 'textfield', 
             name : 'username', 
             id : 'username', 
             label : 'User Name', 
             labelWidth : '30%' 
            }, { 
             xtype : 'passwordfield', 
             name : 'password', 
             id : 'password', 
             label : 'Password', 
             labelWidth : '30%' 
            }, { 
             xtype : 'textfield', 
             id : 'domain', 
             name : 'domain', 
             label : 'Domain', 
             labelWidth : '30%' 
            } ] 
           }, 

           { 
            //fieldset defined for the Work Item display attributes to be checked. 
            xtype : 'fieldset', 
            id:'check', 
            title : '<div class="appconfig"><div>App Configuration</div>' 
              + '<br /><div style="font-size: 14px;font-weight: bold;">Work Item display attributes</div></div>', 
            defaults : { 
             xtype : 'checkboxfield', 
             labelWidth : '30%' 
            }, 
            items : [ 

              { 
               name : 'domainname', 
               id : 'c1', 
               value : 'domainname', 
               label : 'Domain Name', 
               listeners : { 

                check : function() { 
                 var obj1 = Ext 
                   .getCmp('c1'); 
                 if (obj1.isChecked()) { 
                  obj1.check(); 
                  count++; 
                  if (count > 3) { 
                   Ext.Msg 
                     .alert(
                       'InfoImage', 
                       'Please choose only three fields', 
                       Ext.emptyFn); 
                   obj1.uncheck(); 
                   count--; 
                  } 
                 } 
                }, 
                uncheck : function() { 
                 var obj1 = Ext 
                   .getCmp('c1'); 

                 if (!obj1.isChecked()) { 
                  obj1.uncheck(); 
                  count--; 
                 } 

                } 
               } 

              }, 
              { 
               name : 'objectid', 
               id : 'c2', 
               value : 'objectid', 
               label : 'Object ID', 
               checked : 'true', 
               listeners : { 

                check : function() { 
                 var obj2 = Ext 
                   .getCmp('c2'); 

                 if (obj2.isChecked()) { 
                  obj2.check(); 
                  count++; 
                  if (count > 3) { 
                   Ext.Msg 
                     .alert(
                       'InfoImage', 
                       'Please choose only three fields', 
                       Ext.emptyFn); 
                   obj2.uncheck(); 
                   count--; 
                  } 
                 } 
                }, 
                uncheck : function() { 
                 var obj2 = Ext 
                   .getCmp('c2'); 

                 if (!obj2.isChecked()) { 
                  obj2.uncheck(); 
                  count--; 
                 } 

                } 
               } 

              }, 
              { 
               name : 'servername', 
               id : 'c3', 
               value : 'servername', 
               label : 'Server Name', 

               listeners : { 

                check : function() { 
                 var obj3 = Ext 
                   .getCmp('c3'); 

                 if (obj3.isChecked()) { 
                  obj3.check(); 
                  count++; 
                  if (count > 3) { 
                   Ext.Msg 
                     .alert(
                       'InfoImage', 
                       'Please choose only three fields', 
                       Ext.emptyFn); 
                   obj3.uncheck(); 
                   count--; 
                  } 
                 } 
                }, 
                uncheck : function() { 
                 var obj3 = Ext 
                   .getCmp('c3'); 

                 if (!obj3.isChecked()) { 
                  obj3.uncheck(); 
                  count--; 
                 } 

                } 
               } 

              }, 
              { 
               name : 'workitemname', 
               id : 'c4', 
               value : 'workitemname', 
               label : 'WorkItem Name', 
               checked : 'true', 
               listeners : { 

                check : function() { 
                 var obj4 = Ext 
                   .getCmp('c4'); 

                 if (obj4.isChecked()) { 
                  obj4.check(); 
                  count++; 
                  if (count > 3) { 
                   Ext.Msg 
                     .alert(
                       'InfoImage', 
                       'Please choose only three fields', 
                       Ext.emptyFn); 
                   obj4.uncheck(); 
                   count--; 
                  } 
                 } 
                }, 
                uncheck : function() { 
                 var obj4 = Ext 
                   .getCmp('c4'); 

                 if (!obj4.isChecked()) { 
                  obj4.uncheck(); 
                  count--; 
                 } 

                } 
               } 


              } ] 
           }, 

           { 
            //fieldset defined for the App Subtitle to be entered. 
            xtype : 'fieldset', 
            items : [ { 
             xtype : 'textfield', 
             name : 'apptitle', 
             id : 'apptitle', 
             label : 'App Subtitle', 
             labelWidth : '30%', 
             value : 'Mobile Client Work Manager' 
            } ] 
           } 

         ] 

        } 
       }); 

我需要創建模型和存儲嗎?我如何獲得價值並存儲它?

+0

發佈您的代碼以及 – Lucifer

+0

當然,我會馬上去做。 – Khush

回答

1

這裏是你如何申報您的商店:

Ext.define('App.store.Items', { 
    extend: 'Ext.data.Store', 
    requires:"Ext.data.proxy.LocalStorage", 
    config: { 
    proxy: { 
     type: 'localstorage', 
     id: 'application-items' 
    }, 
    autoLoad: true, 
    model: 'App.model.Item',  
    } 
}); 

這裏的模型

Ext.define('App.model.Item', { 
    extend: 'Ext.data.Model', 

    config: { 
    fields: [ 
     'field1', 
     'field2' 
    ] 
    } 
}); 

然後,將項目添加到商店:

store.add({field1:'value1',field2:'value2'}); 
store.sync(); 

希望這有助於

+0

我有些困惑。您在商店中提到的型號名稱是「'App.model.Item',而您創建的型號名稱是'Reminder.model.Task'。它們是2種不同的型號嗎?還有,」Ext.data.proxy。 LocalStorage「我必須創建這個文件還是僅僅提及這個文件? – Khush

+0

對不起,我的不好,只有一個模型,我更新了我的答案,不,你不必創建Ext.data.proxy.LocalStorage ,因爲它已經存在。 –