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

Question

我所拥有的是一个获取ID列表的下拉列表，其选择决定了应该为第二个下拉列表获取哪个列表。问题是，除非我单击（空）第二个下拉列表首先，否则在第一个下拉列表中选择了一个选项后，它将不会填充。 然而，一旦执行了“解决方法”，第二个下拉列表总是在第一个下拉列表中选择选项时正确填充，这是预期的功能（初始怪异除外）。

很抱歉，如果这令人困惑，这是我的代码：

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);
          });
  }

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

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

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

Answer 1

找到我的问题的答案（与你完全相同），将queryMode设置为local ...

comboBox.queryMode ='local';

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

希望这有帮助！