combobox - 如何获得 dijit ComboBox 或 FilteringSelect 所需的最小宽度？

Question

我在对话框中使用 ComboBox 和 FilteringSelect，但还无法使控件仅具有所需的最小宽度，即足够大以显示下拉列表中最长的文本。此外，该控件不得设置为固定宽度，因为下拉列表的实际内容是从翻译数据库填充的。

在带有简单文本输入的纯 html 中，默认情况下它可以顺利运行。然而，由于甚至 dojotoolkit.org 上的所有示例都显示了完全相同的行为，因此在我看来，dojo 为所有这些输入控件引入了最小宽度。因此我想知道是否可以做到......

提前致谢!

Answer 1

我也遇到了同样的问题；经过一番挣扎，我决定适应this我的问题。

就我而言，我被迫使用旧版本的 dojo，并且 FilteringSelect 是声明性的，因此我必须使用 hack (下面代码的最后三行)以确保我的函数将在正确的时间执行。

因此，下面的函数获取所有 dijit 小部件，查找那些存储的元素是 select (getAllDropdowns)，并为每个获取其选项的元素复制内容在移动到可见屏幕之外的新元素中，并采用该元素的宽度，并通过填充进行调整(这可能不是您的情况，因此请检查 getWidth)；然后它取这些宽度的最大值并将其与输入元素的当前长度进行比较，如果最长的选项更大，则调整输入和最外面的 div 宽度。

这个答案来得很晚，但由于我找到这个解决方案并不容易，所以我认为它可能值得分享。

// change dropdowns width to fit the largest option
function fixDropdownWidth() {
  var getAllDropdowns = function() {
    var dropdowns = [];
    dijit.registry.forEach(function(widget, idx, hash) {
      if (widget.store) {
        var root = widget.store.root;
        if (root && root.nodeName.toLowerCase() == 'select') {
          dropdowns.push(widget);
        }
      }
    });
    return dropdowns;
  };

  var getTesterElement = function() {
    var ret = dojo.query('tester');
    if (ret.length) {
      return ret;
    }
    else {
      document.body.appendChild(document.createElement('tester'));
      return dojo.query('tester');
    }
  };

  var getWidth = function(el) {
    var style = dojo.getComputedStyle(el);
    return el.clientWidth + parseInt(style.paddingLeft) + parseInt(style.paddingRight);
  };

  var getOptionWidth = function(option) {
    var testEl = getTesterElement();
    testEl[0].innerHTML = option.innerHTML;
    return getWidth(testEl[0]);
  };

  var dropdowns = getAllDropdowns();
  var testEl = getTesterElement();
  dojo.style(testEl[0], {
    position: 'absolute',
    top: -9999,
    left: -9999,
    width: 'auto',
    whiteSpace: 'nowrap'
  });
  for (var i = 0; i < dropdowns.length; i++) {
    var input = dropdowns[i].textbox;
    dojo.style(testEl[0], {
      fontSize: dojo.style(input, 'fontSize'),
      fontFamily: dojo.style(input, 'fontFamily'),
      fontWeight: dojo.style(input, 'fontWeight'),
      letterSpacing: dojo.style(input, 'letterSpacing')
    });
    var max = 0;
    var treshold = 5;
    dojo.query('option', dropdowns[i].store.root).forEach(function(el, idx, list) {
      max = Math.max(max, getOptionWidth(el) + treshold);
    });
    if (max > getWidth(dropdowns[i].textbox)) {
      var icon = dojo.query('.dijitValidationIcon', dropdowns[i].domNode)[0];
      dojo.style(dropdowns[i].textbox, {width: max + 'px'});
      var width = max + getWidth(icon) + getWidth(dropdowns[i].downArrowNode) + treshold;
      dojo.style(dropdowns[i].domNode, {
        width: width + 'px'
      });
    }
  }
}


dojo.addOnLoad(function() {
  dojo._loaders.push(fixDropdownWidth);
});