如何在Ext-JS 3.0中复用新增记录窗口加载数据做更新？

我在Ext-JS 3.0中为记录更新功能添加新按钮时遇到问题。我已有一个创建新记录的窗口，打算复用它编辑现有记录，想知道如何将选中的现有记录数据加载到该窗口的表单字段中？

以下是新增记录的代码，我希望更新时将目标记录内容加载到该窗口，这是否可行？我认为可能需要类似store.load.record.data['id']的操作？

提前感谢您的帮助。

var winAdd = new Ext.Window({
    id: 'winAdd',
    renderTo: Ext.getBody(),
    layout: 'fit',
    width: 400,
    autoHeight: true,
    closeAction: 'hide',
    closable: false,
    title: 'add item',
    plain: true,
    items: {
        xtype: 'form',
        id: 'frmAdd',
        autoHeight: true,
        frame: true,
        defaultType: 'textfield',
        border: false,
        dock_id: <?=$_SESSION['user']->getDock()->getId()?>,
        defaults: {allowBlank: true, anchor: '95%'},
        items: [{
            fieldLabel: 'dock',
            hiddenName: 'dock',
            name: 'dock',
            xtype: 'combo',
            store: strRamps,
            displayField: 'name',
            valueField: 'id',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            forceSelection: true
        },

以下是更新记录的代码：

new Ext.Toolbar.Button({
    text: '<?= $this→translate('edit item') ?>',
    handler: function () {
        Ext.getCmp('winAdd').show(this);
        var conn = new Ext.data.Connection();
        conn.request({
            url: 'example/updateItem',
            method: 'POST',
            params: {id: gridPanel.selModel.selection.record.data['id']},
            success: function (responseObject) {
                store.update(gridPanel.selModel.selection.record);
            },
    })
}
}

当然可行！其实Ext JS 3.0的表单组件已经内置了完美适配这个需求的方法，完全不用额外发起AJAX请求（毕竟你已经通过Grid的选择模型拿到了客户端的选中记录），具体操作步骤如下：

核心实现步骤 #

1. 确认选中记录：你已经通过gridPanel.selModel.selection.record拿到了选中的记录，这部分逻辑没问题，建议加个判断避免未选中记录时的错误。
2. 获取表单实例：用Ext.getCmp('frmAdd')获取窗口内的表单组件。
3. 加载记录到表单：调用表单的loadRecord方法，把选中的记录传入即可——它会自动根据表单字段的name属性和记录的字段名做匹配，把数据填充到对应的输入框里（包括你用到的下拉框，只要记录里的字段值和下拉框的valueField一致，就会自动选中对应的选项）。

另外，为了让用户更清楚当前是编辑模式，建议动态修改窗口的标题，比如从“add item”改成“Edit Item”。

修改后的编辑按钮代码 #

new Ext.Toolbar.Button({
    text: '<?= $this->translate('edit item') ?>',
    handler: function () {
        // 先判断是否选中了记录
        var selectedRecord = gridPanel.selModel.selection.record;
        if (!selectedRecord) {
            Ext.Msg.alert('提示', '请先选中一条要编辑的记录');
            return;
        }
        
        // 获取窗口和表单实例
        var editWin = Ext.getCmp('winAdd');
        var editForm = Ext.getCmp('frmAdd');
        
        // 切换窗口标题为编辑模式
        editWin.setTitle('Edit Item');
        // 将选中记录加载到表单
        editForm.loadRecord(selectedRecord);
        // 显示窗口
        editWin.show(this);
    }
})

补充说明 #

• 后续保存编辑内容时，只需要调用editForm.getForm().getValues()获取修改后的数据，再发起请求提交到后端即可。
• 一定要确保表单字段的name属性和你的数据模型（Record）里的字段名完全一致，这样loadRecord才能正确匹配并填充数据。

内容的提问来源于stack exchange，提问作者Svetlana