Javascript 使用extjs向网格中添加表单值

在我的JavaScript文件中，我有以下存储变量：

Ext.onReady(function() {
 var store2 = Ext.create('Ext.data.Store', {

 storeId : 'employeeStore',
 fields : [ 'firstname', 'lastname', 'age' ],
 data : [ {
 firstname : "Michael",
 lastname : "Scott",
 age : "7",
 }, {
 firstname : "Caroline",
 lastname : "Schrute",
 age : "2",
 }, {
 firstname : "Jim",
 lastname : "Halpert",
 age : "3"
 }, {
 firstname : "Kevin",
 lastname : "Malone",
 age : "4",
 }, {
 firstname : "Angela",
 lastname : "Martin",
 age : "5",
 } ]
     });

在我的面板后面几行我有几个表单字段：

Ext.create('Ext.form.Panel', {
    title : 'Person Info',
    labelWidth : 75,

    frame : true,
    bodyStyle : 'padding:5px 5px 0',
    width : 900,
    renderTo : Ext.getBody(),
    layout : 'column',
    // arrange fieldsets side by side
    items : [
            {

                // ***** Person Info*****
                // Fieldset in Column 1 - collapsible via toggle button
                xtype : 'fieldset',
                columnWidth : 0.5,
                title : 'Person Details',
                collapsible : true,
                defaultType : 'textfield',
                defaults : {
                    anchor : '100%'
                },
                layout : 'anchor',
                items : [
                        {
                            fieldLabel : 'First Name:',
                            name : 'PersonFirstName'
                        },
                        {
                            fieldLabel : 'Last Name:',
                            name : 'PersonLastname'
                        } 
  (etc...)

在这个面板中，我还有一个按钮，假设在单击时将值存储到网格中

{
                text : 'Add Person',
                xtype : 'button',
                // margin: '0 0 0 100',
                formBind : true,
                // only enabled once the form is valid
                disabled : true,
                handler : function() {

                    // write code to add all fields to the grid
                    var form = this.up('form').getForm();
                    var vals = form.getValues();
                    store2.add(vals);
                }

            },


            {
                xtype : 'grid',
                title : 'Family Details',
                store : Ext.data.StoreManager.lookup('employeeStore'),
                columns : [ {
                    text : 'First Name',
                    dataIndex : 'firstname',
                    type : 'string'
                }, {
                    text : 'Last Name',
                    dataIndex : 'lastname',
                    type : 'string'
                }, {
                    text : 'Age',
                    dataIndex : 'age',
                    type : 'string',

                }, ],
                width : 400,
                forceFit : true,
                renderTo : Ext.getBody()
            } ]

当我按下按钮时，我无法看到网格中的值。它只返回一个空行。

您可能需要将代理配置添加到存储中并检查一次。 有关更多信息，请查看sencha的示例

---

还要检查您的商店是否已加载。

很难说问题到底出在哪里。我将从以下几点开始：

从网格中删除所有柱，只保留一根。（例如lastname） 此步骤将检查是否由于将数据映射到状态而出现问题

单击按钮时，首先使用虚拟数据，以查看附加到存储的操作是否正常

var objectCollection=new Array（）

var objectItem=新对象（）

objectItem.lastname=“TestName”

objectCollection.push（objectItem）

store2.loadData（objectCollection）

此外，我看到您在存储中定义了值，但没有使用“自动加载”属性。 它应该填充为true（'autoLoad:true'）

---

表单字段名称应与网格列数据索引匹配。在我们的例子中，人名的表单字段名是“name:‘PersonFirstName’”，所以网格列Firs name的数据索引应该是“PersonFirstName”，反之亦然