如何將textfield值添加到網格面板上按鈕單擊事件在extjs

Question

我想知道如何將textfields值添加到網格上的按鈕單擊事件在extjs中。 我可以看到形式和所有驗證控件，但是當我點擊按鈕，我不能給這個數據添加到網格面板 我的代碼如下

app.js

Ext.application({ 
    name: 'app', 
    launch: function() { 
    Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 

     {name: 'name', type: 'string'}, 
     {name: 'dob', type: 'date'}, 
     {name: 'email', type: 'string'}, 
     {name: 'mobile', type: 'string'}, 

    ] 
}); 


var data = { 
    users: [ 
     { 

      name: 'abc', 
      dob: '4/12/2012', 
      email: 'abc@yahoo.com', 
      mobile:'9800000774' 
     }, 
     { 

      name: 'xyz', 
      dob: '4/13/2012', 
      email: 'xyz@yahoo.com', 
      mobile:'9821111774' 
     } 
    ] 
}; 

//note how we set the 'root' in the reader to match the data structure above 
var store = Ext.create('Ext.data.Store', { 
    autoLoad: true, 
    storeId:'dataStore', 
    model: 'User', 
    data : data, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'users' 
     } 
    } 
}); 
Ext.define('MyApp.view.ui.MyWindow', { 
    extend: 'Ext.window.Window', 

    height: 505, 
    width: 462, 
    title: 'My Window', 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'form', 
        height: 270, 
        padding: 5, 
        bodyPadding: 10, 

        title: 'My Form', 
        items: [ 
         { 
          xtype: 'textfield', 
          id: 'txtnm', 
          fieldLabel: 'Name', 
          allowBlank: false, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textareafield', 
          id: 'txtadd', 
          fieldLabel: 'Address', 
          allowBlank: false, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'datefield', 
          id: 'dtDob', 
          fieldLabel: 'DOB', 
          allowBlank: false, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          id: 'txtemail', 
          fieldLabel: 'Email', 
          allowBlank: false, 
          vtype: 'email', 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          id: 'txtmob', 
          fieldLabel: 'Mobile no', 
          allowBlank: false, 
          maskRe: /[0-9]/, 
          maxLength: 10, 
          minLength: 10, 
          anchor: '100%' 
         }, 
         { 
          xtype: 'textfield', 
          id: 'txtpwd', 
          inputType: 'password', 
          fieldLabel: 'Password', 
          allowBlank: false, 
          anchor: '100%' 
         } 
        ] 
       }, 
       { 
        xtype: 'button', 
        id: 'btnSubmit', 
        margin: '0 0 5 200', 
        text: 'Submit', 
        listeners: 
        { 
         click : function() 
         { 
          alert("hi"); 
          //What to write here to add data of a controls in grid 
         } 
        } 

       }, 

       { 
        xtype: 'gridpanel', 
        height: 174, 
        padding: 5, 
        width: 450, 
        title: 'My Grid Panel', 
        store: Ext.data.StoreManager.lookup('dataStore'), 
        columns: [ 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'name', 
          text: 'Name' 
         }, 
         { 
          xtype: 'datecolumn', 
          dataIndex: 'dob', 
          text: 'DOB' 
         }, 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'email', 
          text: 'Email' 
         }, 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'mobile', 
          text: 'Contact no' 
         }, 

        ], 
        viewConfig: { 

        } 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    } 
}); 


//  Ext.define('MyApp.MyWindow', { 
//   extend: 'Ext.Window', 
//   title: 'Welcome!', 
//   initComponent: function() { 
//    this.items = [{ 
//     xtype: 'textfield', 
//     name: 'tfName', 
//     fieldLabel: 'Enter your name' 
//    }], this.callParent(arguments); 
//   } 
//  }); 
     var win = Ext.create('MyApp.view.ui.MyWindow'); 
     win.show(); 
    } 
}); 

Default.aspx的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> 

    <script type="text/javascript" src="extjs/ext-debug.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    </form> 
</body> 
</html> 

Answer 1

網格具有附着到其上的存儲。這部分你是對的。

商店有一個記錄數組。這部分你也是對的（我希望至少）。

當你想添加記錄到網格 - 你需要添加記錄到商店。再看方法add()http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-add

你的形式不附加到模型呢，所以你可能會首先創建一個模型，從形式值填充它的字段，然後將其添加到存儲。查看updateRecord()方法 - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-updateRecord - 但之後您需要更改表單定義以將其映射到模型或各個字段的單個getValue()調用。

當你嘗試這樣的事情後 - 如果你仍然有問題發佈更新的代碼。

最後一個註釋 - 我以爲你使用ExtJs4.x是正確的嗎？