Question

我在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动作添加到我的控制器代码中时，它没有显示任何输入字段。所以有人可以帮助我显示视图并将这些插入物插入商店。

Answer 1

由于以下原因，我已经浏览了上面的代码段。
1）Json语法错误。
2）你搞砸了Ext.define和Ext.Create

我已更新您的脚本并在我的本地计算机上进行了测试。它的工作！

// Controller - app / controller

 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文件并运行！如果您在此处发表任何问题，请点击

如何在extjs中单击按钮时将输入值插入存储区

1 个答案: