extjs2 可编辑表格 弹出窗口

在 ExtJS2 中，要实现可编辑表格并在编辑时弹出窗口，你可以使用 GridPanel 的编辑插件（EditingGridPanel）和窗口组件（Window）的结合。

首先，你需要创建一个可编辑的 GridPanel，并为其指定一个编辑插件。然后，你可以在编辑事件中弹出一个窗口，让用户进行编辑操作。在窗口中进行的编辑完成后，将更新的数据保存到 GridPanel 中。

以下是一个示例代码，演示如何在 ExtJS2 中实现可编辑表格并弹出窗口进行编辑：

Ext.onReady(function() {
  // 创建数据模型
  var store = new Ext.data.Store({
    fields: ['name', 'email', 'phone'],
    data: [
      { name: 'John Doe', email: 'john@example.com', phone: '123-456-7890' },
      { name: 'Jane Smith', email: 'jane@example.com', phone: '987-654-3210' },
      // ...
    ]
  });

  // 创建列模型
  var columnModel = new Ext.grid.ColumnModel({
    columns: [
      { header: 'Name', dataIndex: 'name', editor: new Ext.grid.GridEditor(new Ext.form.TextField()) },
      { header: 'Email', dataIndex: 'email', editor: new Ext.grid.GridEditor(new Ext.form.TextField()) },
      { header: 'Phone', dataIndex: 'phone', editor: new Ext.grid.GridEditor(new Ext.form.TextField()) }
    ]
  });

  // 创建 GridPanel
  var grid = new Ext.grid.EditorGridPanel({
    store: store,
    cm: columnModel,
    renderTo: Ext.getBody(),
    clicksToEdit: 1, // 设置为 1，表示单击单元格即可进入编辑状态
    plugins: [new Ext.ux.grid.RowEditor()], // 使用 RowEditor 插件
    listeners: {
      afteredit: function(editor, changes, record, rowIndex) {
        // 单元格编辑完成后触发
        var win = new Ext.Window({
          title: 'Edit',
          layout: 'form',
          items: [
            new Ext.form.TextField({ fieldLabel: 'Name', value: record.get('name') }),
            new Ext.form.TextField({ fieldLabel: 'Email', value: record.get('email') }),
            new Ext.form.TextField({ fieldLabel: 'Phone', value: record.get('phone') })
          ],
          buttons: [{
            text: 'Save',
            handler: function() {
              // 保存编辑后的数据
              record.set('name', win.getComponent(0).getValue());
              record.set('email', win.getComponent(1).getValue());
              record.set('phone', win.getComponent(2).getValue());
              win.close();
            }
          }]
        });
        win.show();
      }
    }
  });
});

在上面的示例中，我们使用了 RowEditor 插件来实现行级别的编辑功能。在 afteredit 事件中，我们弹出了一个窗口，允许用户在窗口中进行编辑操作。在窗口中的 Save 按钮的事件处理程序中，我们将编辑后的数据保存到 GridPanel 中。

请注意，示例中使用了 Ext.form.TextField 来创建文本输入框，你可以根据实际需求使用其他表单组件。

希望这对你有帮助！如有更多问题，请继续提问。