0

我正在用 extjs 实现项目。我想在单击确定按钮时将文本字段值插入存储。我将表格设计为-

模型-

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");
    });

// 视图 - 应用程序/视图/用户/列表

 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 回答