2

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

带网格的表单面板：

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”。

请帮忙。

4

1 回答 1

0

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

我的解决方案：

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

yourStoe.on('load',function()
{
   //set display field values here
});
于 2013-06-12T10:51:12.410 回答