javascript - 除非先单击，否则 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);
          });
  }

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

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

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

Answer 1

找到了我的问题的答案(与您有完全相同的问题)，将 queryMode 设置为本地...

comboBox.queryMode = '本地';

(引用:ExtJS 3 Combobox connected with Ext.data.JsonStore doesn't open at second++ click)

希望这有帮助!