将网格行中的数据加载到（弹出）表单中进行编辑

Posted 2023-03-25

【中文标题】将网格行中的数据加载到（弹出）表单中进行编辑

【英文标题】：load data from grid row into (pop up) form for editing

【发布时间】：2012-07-08 23:26:40

【问题描述】：

我在 Ext JS in Action（作者 J. Garcia）中读到，如果我们有 Ext.data.Record 的实例，我们可以使用表单的 loadRecord 方法来设置表单的值。然而，他没有给出一个工作示例（在示例中，他使用数据通过名为 data.php 的文件加载到表单中）。我搜索了许多论坛，发现以下条目很有帮助，因为它让我了解了如何使用表单的 loadRecord 方法解决我的问题： load data from grid to form

现在我的商店和网格的代码如下：

var userstore = Ext.create('Ext.data.Store', 
  storeId: 'viewUsersStore',
  model: 'Configs',
  autoLoad: true,
  proxy: 
    type: 'ajax',
    url: '/user/getuserviewdata.castle',
    reader: 
      type: 'json',
      root: 'users'
    ,
    listeners: 
      exception: function (proxy, response, operation, eOpts) 
        Ext.MessageBox.alert("Error", "Session has timed-out. Please re-login and try again.");
      
    
  
);

var grid = Ext.create('Ext.grid.Panel', 
  id: 'viewUsersGrid',
  title: 'List of all users',
  store: Ext.data.StoreManager.lookup('viewUsersStore'),
  columns: [
     header: 'Username', dataIndex: 'username' ,
     header: 'Full Name', dataIndex: 'fullName' ,
     header: 'Company', dataIndex: 'companyName' ,
     header: 'Latest Time Login', dataIndex: 'lastLogin' ,
     header: 'Current Status', dataIndex: 'status' ,
     header: 'Edit',
      menuDisabled: true,
      sortable: false,
      xtype: 'actioncolumn',
      width: 50,
      items: [
        icon: '../../../Content/ext/img/icons/fam/user_edit.png',
        tooltip: 'Edit user',
        handler: function (grid, rowIndex, colIndex) 
          var rec = userstore.getAt(rowIndex);
          alert("Edit " + rec.get('username')+ "?");
          EditUser(rec.get('id'));
        
      ]
    ,
  ]
);

function EditUser(id) 
  //I think I need to have this code here - I don't think it's complete/correct though
  var formpanel = Ext.getCmp('CreateUserForm');
  formpanel.getForm().loadRecord(rec);

'CreateUserForm' 是一个已经存在的表单的 ID，当用户点击编辑图标时它应该出现。然后应该使用网格行中的正确数据自动填充该弹出表单。

但是我的代码不起作用。我在“formpanel.getForm().loadRecord(rec)”行收到一个错误 - 它说“Microsoft JScript 运行时错误：'undefined' is null or not an object”。

关于如何解决这个问题的任何提示？

【参考方案1】：

Rec 在您的 EditUser 函数中未定义。您将 ID 作为参数提供给 EditUser，您需要将记录作为参数提供给它。

//The call
EditUser(rec);

function EditUser(rec) 
    var formpanel = Ext.getCmp('CreateUserForm'); 
    formpanel.getForm().loadRecord(rec);     

【讨论】：

我试过了，但仍然在“formpanel.getForm().loadRecord(rec)”行出现错误 - 它说“Microsoft JScript 运行时错误：'undefined' is null or not an object' .

你确定你的 Ext.getCmp('CreateUserForm') 是对的吗？检查是否未定义。试试这个：alert(formpanel)，如果这给出了 undefined 问题就在那里。如果您粘贴 CreateUserForm 代码可能会很方便。

alert(formpanel) 确实给出了未定义的。我该如何解决这个问题？我的 CreateUserForm 代码位于一个名为 Edit.vm 的单独文件中（我使用的是 Visual Studio 和 Castle MonoRail）。您认为这是问题所在吗，即它无法访问该表单？

我认为问题确实是您无法查询表单。是同一面板/容器中的表单。您的布局是如何构建的？当您尝试查询时，表单是否已经创建？你有可能的截图吗？

'CreateUserForm' 是在名为 Edit.vm 的文件中的窗口中的表单的 ID。我正在尝试从 View.vm 中查询表单，该文件是一个单独的文件，但与 Edit.vm 位于同一文件夹中（Edit.vm 和 View.vm 都位于名为“user”的文件夹中）。当我尝试查询它时，我认为该表单尚未创建，但我不确定。我想在此评论中添加屏幕截图，但不知道该怎么做。您认为在 EditUser 函数中简单地创建一个新的“EditUser”表单，然后将网格行中的数据加载到该表单中更好吗？