确定 dojo dijit 对话框和所有小部件何时首先完成 load/populate

Question

好吧，我有一个对你们中的许多人来说似乎非常愚蠢的问题，但我很困惑。我正在从事一个有点过时的 dojo 项目。其中一部分已转换为 AMD，而另一部分尚未转换。这部分还没有，还请多多包涵

我有一个加载了 dgrid 的页面，并且具有 dijit.Dialog 的 shell 构建但隐藏在 html 标记中。页面上有一个编辑按钮，当按下该按钮时，它会构建并填充对话框及其相关联的 dijits（通过旧 dojox.data.XmlStores 选择、multiselects 等，并使用来自 selected grid row to select 每个 dijit 中的正确数据。当构建 dijit 时，会添加 onChange 事件。当在这些 dijit 中设置数据时，onChange 事件会触发。这是需要的。有时一个 dijit 的value 需要更改另一个 dijit 的值...即使是在第一次加载时。但是，我有几个额外的 javascript 函数与 onChange 事件相关联，并根据页面上的其他值设置字段值。这些 DO不需要运行第一次完全加载对话框及其所有字段。

以下是我认为与我的代码相关的部分： HTML 标记：

<div class="dijitHidden">
             <div data-dojo-type="dijit.Dialog" style="width:800px;text-align:left;" id="editDialog">
                <table width='800px' cellpadding='25px' cellspacing='10px'>
                   <tr>
                     <td align="right"><From: </td>
                     <td align="left">
                       <div id="fromSelector"></div>
                     </td>
                     <td></td>
                     <td></td>
                   </tr>
                   <tr>
                     <td align="right">Unit: </td>
                     <td align="left">
                       <div id="fromUnitSelector"></div>
                     </td>
                     <td></td>
                     <td></td>
                   </tr>
                   <tr>
                     <td align="right">Room: </td>
                     <td align="left">
                       <div id="fromRoomSelector"></div>
                     </td>
                     <td></td>
                     <td></td>
                   </tr>
                   <tr>
                     <td align="right">Mode: </td>
                     <td align="left" id="mode">
                       <div id="modeSelector"></div>
                     </td>
                     <td align="right">Priority:</td>
                     <td align="left" id="priority">
                       <div id="prioritySelector"></div>
                     </td>
                   </tr>
                   <tr>
                     <td></td>
                     <td></td>
                     <td align="right">Transporters: </td>
                     <td align="left" id="numSel">
                       <div id="numTranSelector"></div>
                     </td>
                   </tr>
                   <tr>
                     <td align="right">Type: </td>
                     <td align="left" id="type">
                       <div id="typeSelector"></div>
                     </td>
                     <td align="right">Comments:</td>
                     <td align="left" id="comment">
                       <div id="comments"></div>
                     </td>
                   </tr>
                 </table>
             </div>
         </div>

Javascript:

function edit_button_pressed() {
//Javascript that creates the boxes
            //begin From Location
            dojo.byId("fromSelector").innerHTML = "";
            var fromSelector = dojo.byId("fromSelector");
            var locStore = new dojox.data.XmlStore({
              url: 'getlocations.url',
              label: 'label',
              keyAttribute:'id'  
            });   
             function sizeLocs(size, request){
                var requests = size;
                if (requests > 0) { 
                  //from
                  var fromSelect = new dijit.form.Select({
                      name: "fromSelect",
                      id: "fromSelect",
                      store: locStore,
                      style: "width: 200px;",
                      labelAttr: "label"
                   }).placeAt(fromSelector);
                  fromSelect.startup();
                  fromSelect.addOption({label: '--Select a Loc--', value: ' '});
                  if (transFromLoc.length > 0) {
                    fromSelect.set('value', transFromLoc);
                  } else {
                    fromSelect.set('value', ' ');
                  }
                  if (disableBecauseStarted) {
                      fromSelect.set('disabled', 'disabled');
                  }
                  fromSelect.on("change", function(){
                      if ((String(fromSelect.value) != String(defaultOrigination)) || disableBecauseStarted) {
                          dijit.byId('fromUnitSelect').set('disabled', 'disabled');
                          dijit.byId('fromRoomSelect').set('disabled', 'disabled');  
                      } else {
                          dijit.byId('fromUnitSelect').set('disabled', false);
                          dijit.byId('fromRoomSelect').set('disabled', false);
                      }
                      setAutoPriority();
                  })
                }
            }        
            //end from location


            //Units Select
            var unitStore = new dojox.data.XmlStore({
              url: 'getUnits.url',
              label: 'label',
              keyAttribute:'id'  
            });
            //from
            var fromUnitSelect = new dijit.form.Select({
                      name: "fromUnitSelect",
                      id: "fromUnitSelect",
                      store: unitStore,
                      style: "width: 150px;",
                      labelAttr: "label"
                   }).placeAt(dojo.byId('fromUnitSelector'));
            fromUnitSelect.startup();
            fromUnitSelect.set('disabled', 'disabled'); 
            fromUnitSelect.addOption({label: '--Unit--', value: ' '});
            if (transFromUnit.length > 0) {
                fromUnitSelect.set('value', transFromUnit);
            } else {
                fromUnitSelect.set('value', ' ');
            }
            fromUnitSelect.on("change", function(){
                dijit.byId('fromRoomSelect').destroy();
                var fromRoomStore = new dojox.data.XmlStore({
                  url: 'getRooms.url?UNIT=' + this.value,
                  label: 'label',
                  keyAttribute:'id' 
                });
                var fromRoomSelect = new dijit.form.Select({
                      name: "fromRoomSelect",
                      id: "fromRoomSelect",
                      store: fromRoomStore,
                      style: "width: 150px;",
                      labelAttr: "label"
                   }).placeAt(dojo.byId('fromRoomSelector'));
                fromRoomSelect.startup();
                fromRoomSelect.addOption({label: '--Select a Room--', value: ' '});
                if (transFromRoom.length > 0) {
                    fromRoomSelect.set('value', transFromRoom);
                } else {
                    fromRoomSelect.set('value', ' ');
                }
                if (String(dijit.byId('fromSelect').value) != String(defaultOrigination)) {
                    dijit.byId('fromUnitSelect').set('disabled', 'disabled');
                    dijit.byId('fromRoomSelect').set('disabled', 'disabled');  
                } else {
                    dijit.byId('fromUnitSelect').set('disabled', false);
                    dijit.byId('fromRoomSelect').set('disabled', false);
                }
                if (dijit.byId('patientSelect') != null
                    && String(dijit.byId('patientSelect').value).length > 1 ) {
                    var patientDataStore = new dojox.data.XmlStore({
                        url: 'getPatient.url?MRN=' + String(dijit.byId('patientSelect').value),
                        rootItem: "patient" 
                     });
                    var getPat = function(items, request){
                      for(var i = 0; i < items.length; i++){
                        var item = items[i];
                        var assignedRoom = String(patientDataStore.getValue(item, "assignedRoom"));
                        var reservationRoom = String(patientDataStore.getValue(item, "roomReservationRoom"));
                      }
                      if (reservationRoom.length > 0 ) {
                          setAssToRoom(reservationRoom);
                          setAssRoom(assignedRoom);
                      } else {
                          setAssToRoom(assignedRoom);
                          setAssRoom(assignedRoom);
                      }
                    }
                    var request = patientDataStore.fetch({query:{}, onComplete: getPat});
                }
                setAutoPriority();
            })


        //Begin Modes
            dojo.byId("createModeSelector").innerHTML = "";
            var createModeSelector = dojo.byId("createModeSelector");
            var transModeStore = new dojox.data.XmlStore({
              url: '/workassign/getTransModes.wa',
              label: 'label',
              keyAttribute:'id'  
            });   
             function transSizeMode(size, request){
                var requests = size;
                var modeSelect = "";
                if (requests > 0) { 
                  createModeSelect = new dijit.form.Select({
                      name: "createModeSelect",
                      id: "createModeSelect",
                      store: transModeStore,
                      style: "width: 200px;",
                      labelAttr: "label"
                   }).placeAt(createModeSelector);
                  createModeSelect.startup();
                  createModeSelect.addOption({label: '--Select a Mode--', value: ' '});
                }
            }
            transModeStore.fetch({query: {}, onBegin: transSizeMode, start: 0, count: 0});   
        //End Modes

        //Begin Types
            dojo.byId("typeSelector").innerHTML = "";
            var typeSelector = dojo.byId("typeSelector");
            var transTypeStore = new dojox.data.XmlStore({
              url: 'getType.url',
              label: 'label',
              keyAttribute:'id'  
            });   
            var typeSel = new dijit.form.MultiSelect({
                   name: 'typeSelect',
                   id: 'typeSelect',
                   style: 'width: 200px; font-size: 18px;'
                }).placeAt(typeSelector);
            var fillTypes = function(items, request){
                dojo.forEach(items, function(item) {
                var c = dojo.doc.createElement('option');
                c.innerHTML = transTypeStore.getValue(item, "label");
                c.value = transTypeStore.getValue(item, "id");
                typeSelect.appendChild(c);
                })
                if (transType.length > 0) {
                  var transArray = transType.split(",");
                  typeSel.set('value', transArray);
                } else {
                  typeSel.set("value", " ");
                }  
            }
            typeSel.on("change", function(){
                setAutoPriority();
                setAutoTransporters();
            })
            typeSel.startup();       
        //End Types

            dojo.byId("prioritySelector").innerHTML = "";
            var prioritySelector = dojo.byId("prioritySelector");
            var priorityModeStore = new dojox.data.XmlStore({
              url: 'getPriorities.url',
              label: 'label',
              keyAttribute:'id' 
            });   
             function prioritySizeMode(size, request){
                var requests = size;
                var modeSelect = "";
                if (requests > 0) { 
                  prioritySelect = new dijit.form.Select({
                      name: "prioritySelect",
                      id: "prioritySelect",
                      store: priorityModeStore,
                      style: "width: 200px;",
                      labelAttr: "label"
                   }).placeAt(prioritySelector);
                  prioritySelect.startup();
                  prioritySelect.addOption({label: '--Select a Priority--', value: ' '});
                }
                if (priorityType.length > 0) {
                    prioritySelect.set('value', priorityType);
                } else {
                    prioritySelect.set('value', ' ');
                }
                if(userLevel=="TransScheduler") {
                     //Check priority override property
                     dojo.request.xhr("/workassign/getPriorityOverrideStatus.wa", {
                         handleAs: "text"
                     }).then(function(data){
                      if (data.indexOf("false") > -1) {
                          dijit.byId('prioritySelect').set('disabled',true);
                      }
                     }, function(err){
                        // Handle the error condition
                        alert("error: " + err);
                     }, function(evt){
                       // Handle a progress event from the request if the
                       // browser supports XHR2
                     });
                }
            }

       //Fetches and populate data
          transModeStore.fetch({query: {}, onBegin: transSizeMode, start: 0, count: 0});
          transTypeStore.fetch({query: {}, onComplete: fillTypes});
          priorityModeStore.fetch({query: {}, onBegin: prioritySizeMode, start: 0, count: 0});
          locStore.fetch({query: {}, onBegin: sizeLocs, start: 0, count: 0});

      //show the dialog
      dijit.byId("editDialog").show();
} //end edit_button_pressed


function setAutoPriority() {
    var params = "";
    if (dijit.byId("fromUnitSelect")) {
        params = params + "&FROMUNIT=" + dijit.byId("fromUnitSelect").get("value");
    }
    if (dijit.byId("toUnitSelect")) {
        params = params + "&TOUNIT=" + dijit.byId("toUnitSelect").get("value");
    }
    if (dijit.byId("fromSelect")) {
        params = params + "&FROMLOCATION=" + dijit.byId("fromSelect").get("value");
    }
    if (dijit.byId("toSelect")) {
        params = params + "&TOLOCATION=" + dijit.byId("toSelect").get("value");
    }
    if (dijit.byId("typeSelect")) {
        params = params + "&TYPE=" + dijit.byId("typeSelect").get("value");
    }

    dojo.request.xhr("getHighestPriority.URL?NUM=0" + params, {
                handleAs: "text"
            }).then(function(data){
                if (dijit.byId("prioritySelect")) {
                    dijit.byId("prioritySelect").set('value', data);
                }
            }, function(err){
                // Handle the error condition
                alert("error: " + err);
            }, function(evt){
               // Handle a progress event from the request if the
               // browser supports XHR2
            });
}

function setAutoTransporters() {
    var params = "";
    if (dijit.byId("typeSelect")) {
        params = params + "TYPES=" + dijit.byId("typeSelect").get("value");
    }
    dojo.request.xhr("getHighestNum.url?" + params, {
                handleAs: "text"
            }).then(function(data){
                if (dijit.byId("numTransSelect")) {
                    dijit.byId("numTransSelect").set('value', data);
                }
            }, function(err){
                // Handle the error condition
                alert("error: " + err);
            }, function(evt){
               // Handle a progress event from the request if the
               // browser supports XHR2
            });
}

如您所见，我有调用 XmlStores 的提取和 select 应在适用时 select 在各个 dijit 中编辑的内容。对我来说问题函数是 setAutoPriority() 和 setAutoTransporters()。我可以轻松地将一个变量传递给这些函数，以告诉它它是否是第一次加载……甚至可以将它们的调用包装在一个 if 语句中。我只是不知道如何判断一切（用数据填充 dijit 并设置它们的值）已经发生。

如有任何想法，我们将不胜感激。到目前为止，我想出的一切都没有奏效。仅供参考，根据网格行 selected 中的数据，并非所有这些 dijit 每次都会 change/have 数据 selected...这更加混淆了水。

Answer 1

所以，这只是一个想法草案：

我无法测试它
它很脏（有更好的方法）

但总体思路是有的。想法的核心部分是前4行代码。

var fetchDone = 0;

function isReady() {
  return fetchDone >= 4; //the amount of fetch you have bellow
}

function edit_button_pressed() {
    //Javascript that creates the boxes
    //begin From Location

    //reset the counter
    fetchDone = 0;

    dojo.byId("fromSelector").innerHTML = "";
    var fromSelector = dojo.byId("fromSelector");
    var locStore = new dojox.data.XmlStore({
      url: 'getlocations.url',
      label: 'label',
      keyAttribute: 'id'
    });

    function sizeLocs(size, request) {
        var requests = size;
        if (requests > 0) {
          //from
          var fromSelect = new dijit.form.Select({
            name: "fromSelect",
            id: "fromSelect",
            store: locStore,
            style: "width: 200px;",
            labelAttr: "label"
          }).placeAt(fromSelector);
          fromSelect.startup();
          fromSelect.addOption({
            label: '--Select a Loc--',
            value: ' '
          });
          if (transFromLoc.length > 0) {
            fromSelect.set('value', transFromLoc);
          } else {
            fromSelect.set('value', ' ');
          }
          if (disableBecauseStarted) {
            fromSelect.set('disabled', 'disabled');
          }
          fromSelect.on("change", function() {
            if ((String(fromSelect.value) != String(defaultOrigination)) || disableBecauseStarted) {
              dijit.byId('fromUnitSelect').set('disabled', 'disabled');
              dijit.byId('fromRoomSelect').set('disabled', 'disabled');
            } else {
              dijit.byId('fromUnitSelect').set('disabled', false);
              dijit.byId('fromRoomSelect').set('disabled', false);
            }
            setAutoPriority();
          })
        }
      }
      //end from location
      //Units Select
    var unitStore = new dojox.data.XmlStore({
      url: 'getUnits.url',
      label: 'label',
      keyAttribute: 'id'
    });
    //from
    var fromUnitSelect = new dijit.form.Select({
      name: "fromUnitSelect",
      id: "fromUnitSelect",
      store: unitStore,
      style: "width: 150px;",
      labelAttr: "label"
    }).placeAt(dojo.byId('fromUnitSelector'));
    fromUnitSelect.startup();
    fromUnitSelect.set('disabled', 'disabled');
    fromUnitSelect.addOption({
      label: '--Unit--',
      value: ' '
    });
    if (transFromUnit.length > 0) {
      fromUnitSelect.set('value', transFromUnit);
    } else {
      fromUnitSelect.set('value', ' ');
    }
    fromUnitSelect.on("change", function() {
        dijit.byId('fromRoomSelect').destroy();
        var fromRoomStore = new dojox.data.XmlStore({
          url: 'getRooms.url?UNIT=' + this.value,
          label: 'label',
          keyAttribute: 'id'
        });
        var fromRoomSelect = new dijit.form.Select({
          name: "fromRoomSelect",
          id: "fromRoomSelect",
          store: fromRoomStore,
          style: "width: 150px;",
          labelAttr: "label"
        }).placeAt(dojo.byId('fromRoomSelector'));
        fromRoomSelect.startup();
        fromRoomSelect.addOption({
          label: '--Select a Room--',
          value: ' '
        });
        if (transFromRoom.length > 0) {
          fromRoomSelect.set('value', transFromRoom);
        } else {
          fromRoomSelect.set('value', ' ');
        }
        if (String(dijit.byId('fromSelect').value) != String(defaultOrigination)) {
          dijit.byId('fromUnitSelect').set('disabled', 'disabled');
          dijit.byId('fromRoomSelect').set('disabled', 'disabled');
        } else {
          dijit.byId('fromUnitSelect').set('disabled', false);
          dijit.byId('fromRoomSelect').set('disabled', false);
        }
        if (dijit.byId('patientSelect') != null && String(dijit.byId('patientSelect').value).length > 1) {
          var patientDataStore = new dojox.data.XmlStore({
            url: 'getPatient.url?MRN=' + String(dijit.byId('patientSelect').value),
            rootItem: "patient"
          });
          var getPat = function(items, request) {
            for (var i = 0; i < items.length; i++) {
              var item = items[i];
              var assignedRoom = String(patientDataStore.getValue(item, "assignedRoom"));
              var reservationRoom = String(patientDataStore.getValue(item, "roomReservationRoom"));
            }
            if (reservationRoom.length > 0) {
              setAssToRoom(reservationRoom);
              setAssRoom(assignedRoom);
            } else {
              setAssToRoom(assignedRoom);
              setAssRoom(assignedRoom);
            }
          }
          var request = patientDataStore.fetch({
            query: {},
            onComplete: getPat
          });
        }
        setAutoPriority();
      })
      //Begin Modes
    dojo.byId("createModeSelector").innerHTML = "";
    var createModeSelector = dojo.byId("createModeSelector");
    var transModeStore = new dojox.data.XmlStore({
      url: '/workassign/getTransModes.wa',
      label: 'label',
      keyAttribute: 'id'
    });

    function transSizeMode(size, request) {
      var requests = size;
      var modeSelect = "";
      if (requests > 0) {
        createModeSelect = new dijit.form.Select({
          name: "createModeSelect",
          id: "createModeSelect",
          store: transModeStore,
          style: "width: 200px;",
          labelAttr: "label"
        }).placeAt(createModeSelector);
        createModeSelect.startup();
        createModeSelect.addOption({
          label: '--Select a Mode--',
          value: ' '
        });
      }
    }
    transModeStore.fetch({
      query: {},
      onBegin: transSizeMode,
      start: 0,
      count: 0
    });
    //End Modes
    //Begin Types
    dojo.byId("typeSelector").innerHTML = "";
    var typeSelector = dojo.byId("typeSelector");
    var transTypeStore = new dojox.data.XmlStore({
      url: 'getType.url',
      label: 'label',
      keyAttribute: 'id'
    });
    var typeSel = new dijit.form.MultiSelect({
      name: 'typeSelect',
      id: 'typeSelect',
      style: 'width: 200px; font-size: 18px;'
    }).placeAt(typeSelector);
    var fillTypes = function(items, request) {
      dojo.forEach(items, function(item) {
        var c = dojo.doc.createElement('option');
        c.innerHTML = transTypeStore.getValue(item, "label");
        c.value = transTypeStore.getValue(item, "id");
        typeSelect.appendChild(c);
      })
      if (transType.length > 0) {
        var transArray = transType.split(",");
        typeSel.set('value', transArray);
      } else {
        typeSel.set("value", " ");
      }
    }
    typeSel.on("change", function() {
      setAutoPriority();
      setAutoTransporters();
    })
    typeSel.startup();
    //End Types
    dojo.byId("prioritySelector").innerHTML = "";
    var prioritySelector = dojo.byId("prioritySelector");
    var priorityModeStore = new dojox.data.XmlStore({
      url: 'getPriorities.url',
      label: 'label',
      keyAttribute: 'id'
    });

    function prioritySizeMode(size, request) {
      var requests = size;
      var modeSelect = "";
      if (requests > 0) {
        prioritySelect = new dijit.form.Select({
          name: "prioritySelect",
          id: "prioritySelect",
          store: priorityModeStore,
          style: "width: 200px;",
          labelAttr: "label"
        }).placeAt(prioritySelector);
        prioritySelect.startup();
        prioritySelect.addOption({
          label: '--Select a Priority--',
          value: ' '
        });
      }
      if (priorityType.length > 0) {
        prioritySelect.set('value', priorityType);
      } else {
        prioritySelect.set('value', ' ');
      }
      if (userLevel == "TransScheduler") {
        //Check priority override property
        dojo.request.xhr("/workassign/getPriorityOverrideStatus.wa", {
          handleAs: "text"
        }).then(function(data) {
          if (data.indexOf("false") > -1) {
            dijit.byId('prioritySelect').set('disabled', true);
          }
        }, function(err) {
          // Handle the error condition
          alert("error: " + err);
        }, function(evt) {
          // Handle a progress event from the request if the
          // browser supports XHR2
        });
      }
    }

    var onFetchComplete = function() {
      fetchDone++;
    };

    //Fetches and populate data
    transModeStore.fetch({
      query: {},
      onBegin: transSizeMode,
      onComplete: onFetchComplete,
      start: 0,
      count: 0
    });
    transTypeStore.fetch({
      query: {},
      onComplete: function() {
        onFetchComplete();
        fillTypes.apply(this, arguments);
      }
    });
    priorityModeStore.fetch({
      query: {},
      onBegin: prioritySizeMode,
      onComplete: onFetchComplete,
      start: 0,
      count: 0
    });
    locStore.fetch({
      query: {},
      onBegin: sizeLocs,
      onComplete: onFetchComplete,
      start: 0,
      count: 0
    });
    //show the dialog
    dijit.byId("editDialog").show();
  } //end edit_button_pressed

function setAutoPriority() {
  if (!isReady()) {
    return;
  }
  var params = "";
  if (dijit.byId("fromUnitSelect")) {
    params = params + "&FROMUNIT=" + dijit.byId("fromUnitSelect").get("value");
  }
  if (dijit.byId("toUnitSelect")) {
    params = params + "&TOUNIT=" + dijit.byId("toUnitSelect").get("value");
  }
  if (dijit.byId("fromSelect")) {
    params = params + "&FROMLOCATION=" + dijit.byId("fromSelect").get("value");
  }
  if (dijit.byId("toSelect")) {
    params = params + "&TOLOCATION=" + dijit.byId("toSelect").get("value");
  }
  if (dijit.byId("typeSelect")) {
    params = params + "&TYPE=" + dijit.byId("typeSelect").get("value");
  }
  dojo.request.xhr("getHighestPriority.URL?NUM=0" + params, {
    handleAs: "text"
  }).then(function(data) {
    if (dijit.byId("prioritySelect")) {
      dijit.byId("prioritySelect").set('value', data);
    }
  }, function(err) {
    // Handle the error condition
    alert("error: " + err);
  }, function(evt) {
    // Handle a progress event from the request if the
    // browser supports XHR2
  });
}

function setAutoTransporters() {
  if (!isReady()) {
    return;
  }
  var params = "";
  if (dijit.byId("typeSelect")) {
    params = params + "TYPES=" + dijit.byId("typeSelect").get("value");
  }
  dojo.request.xhr("getHighestNum.url?" + params, {
    handleAs: "text"
  }).then(function(data) {
    if (dijit.byId("numTransSelect")) {
      dijit.byId("numTransSelect").set('value', data);
    }
  }, function(err) {
    // Handle the error condition
    alert("error: " + err);
  }, function(evt) {
    // Handle a progress event from the request if the
    // browser supports XHR2
  });
}

确定 dojo dijit 对话框和所有小部件何时首先完成 load/populate

Determine when dojo dijit dialog and all widgets have completed first load/populate

javascript

dojo

dgrid