无法使用Form Extjs 4将数据从Grid加载到新窗口

时间:2015-11-16 01:39:23

标签: javascript node.js mongodb extjs

我在将数据从网格加载到Extjs 4中的表单时遇到问题。

我正在尝试将字段vid发送到表单,仅用于测试,但我甚至不能这样做。找到了很多例子,尝试了这些想法。不能这样做。

数据来自mongodb。

我可以完美地在网格中显示它。

现在我想点击编辑按钮打开一个带有表单的窗口并显示信息。

我错过了什么?

Ext.define('DevJS.view.users.List', {
    extend: 'Ext.grid.Panel',
    autoHeight: true,
    forceFit: true,
     this.columns = [
                {text: 'Id', dataIndex: '_id', hidden: true},
                {
                    text: 'Vid',
                    dataIndex: 'vid',
                    autoSizeColumn: true

                }
    ...
    xtype: 'actioncolumn',
                        autoSizeColumn: true,
                        items: [
                            {
                                iconCls: 'button-edit',
                                tooltip: 'Edit',
                                handler: function (grid, rowIndex, colIndex) {
                                    this.up('grid').fireEvent('editRow', grid, rowIndex, colIndex);
                                }
                            },
                            {
                                iconCls: 'button-info',
                                itemId: 'Comments',
                                text: 'Comments',
                                handler: function (grid, rowIndex, item) {
                                    alert(rowIndex)
                                    win.record = rowIndex;

                                    win.show()
                                }
                            }
                        ]
                    }
                ];

                //parent
                this.callParent(arguments);
            }
        });

        var form = new Ext.form.FormPanel({
            title : 'Test form',
            id:'form',
            width : 300,
            items : [{
                xtype: 'textfield',
                editable:false,
                fieldLabel: 'vid',
                name: 'vid'
            }]
        });

        var win = new Ext.Window({
            title : 'test',
            items : [{
                xtype : 'panel',
                layout : 'column',
                items : [form]
            }],
            listeners:{
                afterrender:function(window) {
                    if(window.record) window.down('form').loadRecord(window.record);
                }
            }
        });

2 个答案:

答案 0 :(得分:2)

只需在渲染方法后尝试:

if(window.record) window.down('form').getForm().loadRecord(window.record);
希望它有效。

答案 1 :(得分:1)

创建窗口时,它会被渲染(DOM在后台的某处构建)但window.record尚未设置。

但是在处理程序设置win.record之后,窗口不会被重新呈现,只会显示。

因此,如果您从afterrender切换到beforeshow事件,它应该有效,每次调用win.show()时都会执行该事件。

此外,window.record包含记录的索引,而不是记录本身;但是loadRecord会记录,而不是索引。试试像win.record = grid.getStore().getAt(rowIndex);和loadRecord`应该能够加载记录。