2012-05-26 5 views
1

J'essaie de charger un formulaire et d'enregistrer les détails du formulaire dans le stockage local.Mise en œuvre du stockage local

Je ne suis pas sûr de savoir comment je devrais y aller.

Toutes les suggestions sont utiles.

Ceci est mon formulaire dont je dois sauvegarder les données.

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' 
            } ] 
           } 

         ] 

        } 
       }); 

Est-ce que je dois créer le modèle et le magasin? comment puis-je obtenir les valeurs et les stocker?

+0

Postez votre code aussi bien – Lucifer

+0

Bien sûr.Je vais le faire tout de suite. – Khush

Répondre

1

Voilà comment vous déclarez votre magasin:

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',  
    } 
}); 

est ici le modèle

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

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

Ensuite, pour ajouter un élément à la boutique:

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

Espérer cela aide

+0

Je suis légèrement confus. Le nom du modèle que vous avez mentionné dans le magasin est "'App.model.Item' ', alors que celui que vous avez créé est' Reminder.model.Task '. Sont-ils 2 modèles de diff? Aussi," Ext.data.proxy. LocalStorage "dois-je créer ce fichier ou juste mentionner le nom? – Khush

+0

Désolé, mon mauvais.Il ya un seul modèle et, j'ai mis à jour ma réponse.Non, vous ne devez pas créer le Ext.data.proxy.LocalStorage , tel qu'il existe déjà. –