0

私が持っているのは、ID のリストを取得する 1 つのドロップダウンです。その選択によって、2 番目のドロップダウンでどのリストを取得する必要があるかが決まります。問題は、(空の) 2 番目のドロップダウンをクリックしない限り、最初のドロップダウンで選択肢が選択された後に入力されないことです。ただし、この「回避策」が実行されると、最初のドロップダウンで選択肢が選択されるたびに、2 番目のドロップダウンが常に適切に入力されます。これは意図された機能です (最初の奇妙さを除く)。

わかりにくい場合は申し訳ありませんが、私のコードは次のとおりです。

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()多少は機能します。これにより、レストランが選択された直後にメニューが展開され、適切なアイテムがすべて表示されます。ただし、メニューが何らかの理由で折りたたまれると、再度展開すると空白になります。これは以前とまったく同じ問題です。

4

1 に答える 1

3

私の問題に対する答えが見つかりました（あなたとまったく同じ問題がありました）、queryModeをローカルに設定してください...

コンボボックス.queryMode = 'ローカル';

(参考: Ext.data.JsonStore で接続された ExtJS 3 Combobox が 2 回目のクリックで開かない)

お役に立てれば！

于 2013-04-23T18:51:54.657 に答える