如何在 extjs 4.2 中使用远程存储为组合框设置值答案

【问题标题】：How to set value to combobox with remote store in extjs 4.2如何在 extjs 4.2 中使用远程存储为组合框设置值
【发布时间】：2013-07-28 20:00:38
【问题描述】：

在 Extjs 4.2 中为组合框设置值的正确方法是什么。在 Extjs 4.2 之前，带有远程存储的组合框是使用以下代码设置的。

var book= Ext.create('Test.model.Book', bookValues);
bookCombo.store.loadRawData([book]);
bookCombo.setValue(book.getId());
bookCombo.setRawValue(book.get('name'));
bookCombo.displayTplData = book.data;
bookCombo.fireEvent('change', bookCombo, book.getId());

但是从 4.2 开始，上面这段代码并没有正确设置远程组合的值。

【问题讨论】：

不设置值怎么办？该字段仍然为空？它显示ID而不是名称？还是一开始有效，然后在扩展组合时失去价值？
它曾经在 4.2 之前没有 loadRawData 行的情况下工作。我想知道4.2之后是否需要加载数据并设置值？这是否是正确的方法。
这不是一个简单的问题，事实上......通常的方法是等待组合商店加载后再显示它（例如参见this question）。但是你的也很有趣......你如何获得你试图在商店中加载的书籍模型？您的组合商店是否应该预先加载？偏远吗？
存储在远程，在编辑表单时，需要从数据中设置值。

标签： extjs extjs4 extjs4.2

【解决方案1】：

这让我发疯了，但我终于找到了解决办法。

首先您必须为商店定义一个模型，然后您可以使用新模型实例设置值。

// model
      Ext.define('UserSearchFieldModel', {
        extend: 'Ext.data.Model',
        fields: [
          {name: 'user_id',  type: 'string'},
          {name: 'displayname', type: 'string'}
        ]
      });

// store
      UserSearchField_Store = Ext.create('Ext.data.Store', {
        model: 'UserSearchFieldModel',
        remoteFilter: true,
        proxy: {
          type: 'ajax',
          url: '...',
          reader: {
            type: 'json',
            root: 'userList'
          }
        }
      });

// field
    {
      itemId: 'userField',
      xtype: 'combo',
      queryMode: 'remote',
      hideTrigger: true,
      store: UserSearchField_Store,
      displayField: 'displayname',
      valueField: 'user_id'
    }

// set a initial value on load
    this.down('#userField').setValue(Ext.create('UserSearchFieldModel', {
      id: initialUser.id,
      displayname: initialUser.name
    }));

【讨论】：

【解决方案2】：

我认为在加载数据下方bookCombo.setValue(book.getId()); 应该足以设置组合中的值。设置值后，更改事件应自动触发。调用setValue后自动调用rest

我认为你自己调用所有这些会搞砸。

【讨论】：

您在 Ext JS 的代码中哪里看到存储加载是由组合上的 setValue 调用触发的？ docs.sencha.com/extjs/4.2.1/source/…
@ChristiaanWesterbeek 一点也不。答案针对操作的示例代码，仅表示他在调用setVale() 后不需要调用任何东西...加载发生在这里bookCombo.store.loadRawData([book]);