如何在extjs中向gridpanel上的按钮单击事件添加textfield值

我想知道如何将textfields值添加到extjs中的grid on button click事件中。 我可以看到表单和所有带有验证的控件，但当我单击按钮时，我无法将这些数据添加到网格面板 我的代码如下

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>

无标题页

Grid附带了一个存储区。这部分你说得对

存储有一个记录数组。这部分你也做对了（至少我希望如此）

当您想要将记录添加到网格中时，您需要将记录添加到存储中。查看方法

add（）

您的表单尚未附加到模型，因此您可能必须首先创建一个模型，用表单中的值填充其字段，然后将其添加到存储中。查找

updateRecord（）

method--然后需要更改表单定义以将其映射到模型，或者为每个字段单独调用

getValue（）

在您尝试类似的方法之后-如果您仍然有问题，请发布更新的代码

---

最后一点——我假设您使用的是ExtJs4.x，对吗

我是extj的新手。你能给我举个简单的例子，看看它的4.x版本吗。我已经创建了一个model.Ext.application（{name:'app'，launch:function（）{Ext.define（'User'，{extend:'Ext.data.model'，字段：[{name:'name'，type:'string'}，{name:'dob'，type:'date'}，{name:'email'，type:'string'}，{name:'mobile'，type:'string'}，]}）；试着阅读并仔细阅读该指南：。你没有写一行处理逻辑的代码-只是查看定义。我有定义模型->用户，我创建了一个存储…缺少什么？因为这是我在extjs 4中的第一个示例。你能解释我哪里错了吗？我得到了答案