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

Posted 2023-02-25

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

【英文标题】：Setting data from a store to a form panel which has a grid in extjs 4.2

【发布时间】：2013-04-24 15:31:57

【问题描述】：

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

带网格的表单面板：

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

请帮忙。

【问题讨论】：

您的商店中似乎没有设置autoLoad: true（根据您发布的代码）。如果您查看the docs，您将在顶部看到一个“事件”按钮，它会将您带到所有相应的可用侦听器。看看你是否可以在fiddle 中重现这个错误——它让人们更容易提供帮助。

我也已经尝试过autoload: true。但没有运气......

【参考方案1】：

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

我的解决方案：

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

yourStoe.on('load',function()

   //set display field values here
);

【讨论】：

请告诉我，此解决方案是否适合您。

嗨 Ramya...抱歉耽搁了...在对商店进行了几次实验后...我确实在加载事件中设置了该字段的值...无论如何非常感谢您回应...

没问题。所以它终于与 store 的 load 事件一起工作了。