使用 extjs 将表单值添加到网格中答案

【问题标题】：Adding form values into grid using extjs使用 extjs 将表单值添加到网格中
【发布时间】：2015-01-04 13:39:06
【问题描述】：

在我的 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()
            } ]

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

【问题讨论】：

标签： javascript extjs extjs4

【解决方案1】：

您可能需要将 proxy 配置添加到您的商店并检查一次。有关更多信息，请查看 sencha here 中的此示例并检查您的商店是否已加载。

【讨论】：

【解决方案2】：

很难说到底是哪里出了问题。我会开始如下：

从网格中删除所有列并仅保留一列。（例如姓氏）此步骤将检查是否因为将数据映射到状态而发生问题。
当您单击按钮时，首先使用虚拟数据以查看附加到商店的工作。

var objectCollection = new Array();

var objectItem = new Object();

objectItem.lastname = "TestName";

objectCollection.push(objectItem);

store2.loadData(objectCollection);
此外，我看到您在 store 中定义了值，但不要使用“autoLoad”属性。它应该填充为 true ('autoLoad:true')。

【讨论】：

【解决方案3】：

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

【讨论】：