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

                        ]

                    }
                });

モデルを作成して保存する必要がありますか?値を取得して保存するにはどうすればよいですか?

4

2 に答える 2

1

http://nareshtank.blogspot.in/2012/03/html-5-localstorage-usefull-methods.html

于 2012-05-26T09:57:36.210 に答える
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();

お役に立てれば

于 2012-05-26T15:14:56.843 に答える