Dojo如何扩展dijit类?

时间:2017-06-07 11:59:33

标签: javascript dojo dijit.form

我需要在使用以下代码时在dijit/form/Select上添加一些自定义函数,但是我收到以下错误:

  

未捕获的TypeError:SelectGroup不是构造函数

如何解决此问题?

require([
  'dijit/form/Select',
  'dojo/_base/window',
  'dojo/domReady!'
], function(Select, win) {

  var SelectGroup = define([
    "dojo/_base/declare",
    "dijit/form/Select"
  ], function(declare, Select) {
    return declare(Select, {
      myCustom: function() {
        alert('hey custom');
      }
    });
  });

  var select = new SelectGroup({
    name: 'select',
    options: [{
      label: '<i>Colors I love</i>',
      value: 'G 1',
      disabled: true
    }, {
      label: 'Red',
      value: '1'
    }, {
      label: 'Green',
      value: '2',
      selected: true
    },
    ]
  }, 'select');

  select.on('change', function(value) {
    alert(value);
  }); 

});

1 个答案:

答案 0 :(得分:1)

我认为当你在require(AMD imbrication calls)中编写define()时,这只是一个错误!

这很简单,您只需要进行所有导入(需要),包括声明和调用声明(使您的窗口小部件成为直接),它将返回var SelectGroup引用中的新窗口小部件

请在下面找到一个工作片段:

require([
    "dojo/_base/declare",
    "dijit/form/Select",
    'dojo/_base/window',
    'dojo/domReady!'
  ], function(declare, Select, win) {
  
    var SelectGroup = declare(Select, {
      myCustom: function() {
        alert('hey custom calue is = '+this.value);
      }
    });
    
    var select = new SelectGroup({
    name: 'select',
    options: [{
        label: '<i>Colors I love</i>',
        value: 'G 1',
        disabled: true
      }, {
        label: 'Red',
        value: '1'
      }, {
        label: 'Green',
        value: '2',
        selected: true
      },
    ]
  }, 'select');
    
    
    select.on('change', function(value) {
      select.myCustom();
    });

   
  });
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dijit/themes/claro/claro.css" />

<script>
  window.dojoConfig = {
    parseOnLoad: false,
    async: true
  };
</script>


<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>

<body class="claro">
  <div id="select"></div>
</body>