title: how to add textfield value to the gridpanel on button click event in extjs
body: <p>I want to know how to add the textfields value to the grid on button click event in extjs.
  I can see form and all the controls with validations, but when I click on button I am not able to add this data to the grid panel
  my code is as below</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>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();
      }
  });
  </code></pre>
  
  <p><strong>Default.aspx</strong></p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;Untitled Page&lt;/title&gt;
       &lt;link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"&gt;
  
      &lt;script type="text/javascript" src="extjs/ext-debug.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>