0

私はextjsでプロジェクトを実装しています。[OK]ボタンをクリックすると、テキストフィールドの値がストアに挿入されます。私はフォームを次のように設計しました-

モデル-

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['Question', 'Option']
});

店-

Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
               type: 'localstorage',
           }
    autoLoad: true
});

コントローラ-

Ext.define('AM.controller.Users', {
     extend: 'Ext.app.Controller',
     views: [
                'user.List',
            ],
     store: ['Users'],
     model: ['User'],
     init: function() {
        this.control({
            "button": {
                click: this.onButtonClick
            }
        });
      },    
      onButtonClick: function(button){
      var form = button.up('form').getForm ();

      // Validate the form
      if (form.isValid ()) {
        var values = form.getFieldValues ();
        store.add ({
          Question: values.Question,
          Option: values.Option
        });
      }
      else {
          alert("Insert values in textfields");       
      } 
    }
    });

意見-

Ext.create('Ext.form.Panel', {
    title: 'Question-option',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),        
     items: [{
        xtype: 'textfield',
        name: 'Question',
        fieldLabel: 'Question',
        allowBlank: false  
    }, 
    {
        xtype: 'textfield',
        name: 'Option',
        fieldLabel: 'Option',
    },
    {xtype: 'button', text: 'Ok'}]

しかし、上記のonbuttonclickアクションをコントローラーコードに追加すると、入力フィールドが表示されません。それで、誰かがビューを表示してそれらの入力をストアに挿入するために私を助けてくれますか？

4

1 に答える 1

0

以下の理由により、上記のスニペットを確認しました。
1）Json構文エラー。
2）Ext.defineとExt.Createを台無しにしました

スクリプトを更新し、ローカルマシンでテストしました。その動作！

//コントローラー-アプリ/コントローラー

 Ext.define('AM.controller.Users', {
        extend: 'Ext.app.Controller',

         views: [
                    'user.List'
                ],
         stores: ['Users'],
         models: ['User'],
        init: function() {
            console.log('controller initialized');
            this.control({
                'viewport panel button': {
                    'click': this.onButtonClick
                }
            });
        },

        onButtonClick: function(button, e, eOpts ) {
            var form = button.up('form').getForm();
            var model = this.getModel('AM.model.User');

          // Validate the form
          if (form.isValid ()) {
            var question = model.create(form.getFieldValues());
            console.log(question.data);
          }
          else {
              alert("Insert values in textfields");       
          } 
        }

    },function(){
        console.log("Users Controller created");
    });

//表示-app/view / user / list

 Ext.define('AM.view.user.List', {
        extend: 'Ext.form.Panel',
        alias: 'widget.userlist',
        title: 'Question-option',
        width: 300,
        bodyPadding: 10,
        renderTo: Ext.getBody(),        
         url: 'some url',// in case of ajax
        //  initComponent: function(){
        items: [{
            xtype: 'textfield',
            name: 'Question',
            fieldLabel: 'Question',
            allowBlank: false  // requires a non-empty value
        }, {
            xtype: 'textfield',
            name: 'Option',
            fieldLabel: 'Option'
            vtype: 'email'  // requires value to be a valid email address format
        },
        {
        xtype:'button',
        text:'Save'

       }
        ]

    },function(){
    console.log("List view was created");
    });

JSファイルを更新して実行してください！問題が発生した場合は、ここにコメントしてください

于 2012-11-03T15:00:39.987 に答える