在 extjs 4.2 中将数据从商店设置到具有网格的表单面板

Question

我正在尝试为表单面板中的组件设置值，下面是我的代码。

带网格的表单面板：

Ext.define('MyApp.view.MyForm', {
    extend: 'Ext.form.Panel',

    height: 436,
    width: 754,
    layout: {
        columns: 4,
        type: 'table'
    },
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'displayfield',
                    colspan: 4,
                    fieldLabel: '',
                    value: 'Display Field'
                },
                {
                    xtype: 'displayfield',
                    colspan: 2,
                    margin: '0 50 0 0 ',
                    fieldLabel: 'Age',
                    labelAlign: 'top',
                    value: 'Display Field'
                },
                {
                    xtype: 'displayfield',
                    colspan: 2,
                    fieldLabel: 'Country',
                    labelAlign: 'top',
                    value: 'Display Field'
                },
                {
                    xtype: 'gridpanel',
                    colspan: 4,
                    header: false,
                    title: 'My Grid Panel',
                    store: 'MyJsonStore',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'DeptName',
                            text: 'Dept Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'DeptId',
                            text: 'Dept ID'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

型号：

Ext.define('MyApp.model.EmpModel', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.DeptModel'
    ],

    fields: [
        {
            name: 'Name'
        },
        {
            name: 'Age'
        },
        {
            name: 'Country'
        },
        {
            name: 'Dept'
        }
    ],

    hasMany: {
        associationKey: 'Dept',
        model: 'MyApp.model.DeptModel'
    }
});

Ext.define('MyApp.model.DeptModel', {
    extend: 'Ext.data.Model',

    uses: [
        'MyApp.model.EmpModel'
    ],

    fields: [
        {
            name: 'DeptName'
        },
        {
            name: 'DeptId'
        }
    ],

    belongsTo: {
        associationKey: 'Dept',
        model: 'MyApp.model.EmpModel'
    }
});

商店：

Ext.define('MyApp.store.MyJsonStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.EmpModel'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'MyApp.model.EmpModel',
            storeId: 'MyJsonStore',
            data: {
                EmpDet: [
                    {
                        EmpName: 'Kart',
                        Age: '29',
                        Dept: [
                            {
                                DeptName: 'Dev',
                                DeptId: '1000'
                            }
                        ]
                    }
                ]
            },
            proxy: {
                type: 'ajax',
                url: 'data/empDet.json',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});

Json 数据：

{
    "EmpDet": [
        {
            "EmpName": "Kart",
            "Age": "29",
            "Dept": [
                {
                    "DeptName": "Dev",
                    "DeptId": "1000"
                }
            ]
        }
    ]
}

问题：

1) 我将组件的值保留为“显示字段”本身，因为如果我删除此值，下方网格的宽度会减小。我觉得这是因为表格布局和 colspans。有没有其他最好的方式来显示标签，而不会在值加载时改变任何对齐方式。

2) 我正在尝试设置显示字段的值。我尝试使用afterrender 事件来做到这一点，但问题是它在Ext.getStore('MyJsonStore').getAt(0) 处引发了一个未定义的错误。我发现如果我在按钮的单击事件中编写相同的内容，这可以正常工作。所以，当我尝试显示字段的afterrender 事件时，我觉得商店没有加载（商店的自动加载设置为true）。组件的后渲染事件是否有替代方案。另外，有没有办法一次性设置所有字段值，而不是逐个设置每个组件？

3) 我也发现很难正确地进行关联。我使用的是 Sencha Architect 2.2，当我进入网格的数据索引时，我无法在下拉列表中获取“DeptName”和“DeptId”。

请帮忙。

Answer 1

对于第 2 个问题，我想建议以下方法。我希望它对你有用。

我的解决方案：

您可以在加载商店时设置显示字段值。所以你可以使用 store 的 load 事件如下：

yourStoe.on('load',function()
{
   //set display field values here
});