除非先单击，否则不会填充 Ext.form ComboBox

Question

我有一个下拉列表，它获取一个 ID 列表，它的选择决定了应该为第二个下拉列表获取哪个列表。问题是，除非我单击（空的）第二个下拉列表first，否则在第一个下拉列表中选择一个选项后它不会填充。 然而，一旦执行了这个“变通办法”，只要在第一个下拉列表中选择了一个选项，第二个下拉列表总是会正确填充，这是预期的功能（除了最初的怪异）。

对不起，如果这令人困惑，这是我的代码：

var restaurantInput =
  {
      createInput: function(parentObject, inputClassName, value, propertyObject)
      {
          var restaurantList = [];
          $.ajax({
              type: "GET",
              url: "http://mysite.com/restaurants/",
              success: function(response)
              {
                  var results = (typeof response === 'string' ) ? JSON.parse(response) : response;
                  for (i in results.restaurants){
                      restaurantList.push({restaurantID: results.restaurants[i].restaurant_id.toString(), restaurantname: results.restaurants[i].name});
                  }
              }
          }).done(function(){
              var restaurantCombo = Ext.create("Ext.form.field.ComboBox",
              {
                  store:
                  {
                    filterOnLoad: false,
                    sortOnLoad: false,
                    fields: ["restaurantID", "restaurantname"],
                    data: restaurantList
                  },
                  name: "restaurantName",
                  id: "restaurantName",
                  displayField: "restaurantname",
                  valueField: "restaurantID",
                  listeners: {
                      'select':function(){
                          updateMenuList(Ext.getCmp("restaurantName").getValue());
                      }
                  }
              });
              var str = '<div id="restaurantComboDiv"></div>';
              parentObject.html(str);
              restaurantCombo.setValue(value);
              restaurantCombo.render("restaurantComboDiv");
          });
      }
  };

---

var menuCombo = Ext.create("Ext.form.field.ComboBox",
  {
      store:
      {
        filterOnLoad: false,
        sortOnLoad: false,
        fields: ["menuID", "menuname"],
        data: []
      },
      name: "menuName",
      id: "menuName",
      displayField: "menuname",
      valueField: "menuID",
      multiSelect: true
  });

var menuInput =
  {
      createInput: function(parentObject, inputClassName, value, propertyObject)
      {
      var str = '<div id="menuComboDiv"></div>';
      parentObject.html(str);
      menuCombo.setValue(value);
      menuCombo.render("menuComboDiv");
      }
  };

---

function updateMenuList(RID)
  {
      var menuList = [];
      $.ajax({
              type: "GET",
              url: "http://mysite.com/restaurants/"+RID,
              success: function(response)
              {
                  var results = (typeof response === 'string' ) ? JSON.parse(response) : response;
                  var i=0, len=0;
                  for (i=0, len=results.menu.length; i<len; i++)
                  {
                    menuList.push({menuID: results.menu[i].menu_id, menuname: results.menu[i].name});
                  }
              }
          }).done(function(){
              menuCombo.setValue("");
              menuCombo.store.removeAll();
              menuCombo.store.add(menuList);
              menuCombo.bindStore(menuCombo.store);
          });
  }

页面首次加载时，用户可以从餐厅列表中进行选择。当做出选择时，会触发一个事件，该事件应该更新菜单的存储。然后用户尝试选择他们的订单，但菜单是空白的。如果用户选择另一家餐厅，则菜单会正确填充。每隔一段时间，用户选择任何餐厅，菜单就会继续填充。

如果用户的第一选择是打开菜单，它显然是空白的，因为尚未选择餐厅。如果用户随后选择了一家餐厅，则菜单会正确填充。

我试图通过在更新函数的.done() 中调用menuCombo.expand(); 来解决这个问题，并且它有些工作。这会导致菜单在选择餐厅后立即展开，并且正确的项目都在那里。但是，一旦 Menu 因任何原因折叠，再次展开时它会变为空白，这与之前的问题完全相同。

Answer 1

找到了我的问题的答案（和你的问题完全相同），将 queryMode 设置为本地...

comboBox.queryMode = 'local';

（参考：ExtJS 3 Combobox connected with Ext.data.JsonStore doesn't open at second++ click）

希望这会有所帮助！