如何將輸入值插入extjs

Question

中的buttonclick中我正在使用extjs實現項目。我想插入文本框的值到商店上點擊確定按鈕。我設計的形式原樣

型號 -

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

Store-

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

我已更新腳本並在本地機器上測試過它。它的工作！

//控制器 - 應用程序/控制器

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文件，並運行！如果您遇到任何問題，請點擊此處