Question

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

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是正确的吗？

如何在extjs中的按钮单击事件上向textpanel添加文本字段值

1 个答案: