Dojo 利用 Dijit Button 和 FilteringSelect 创建自定义小部件

Dojo 一个非常实用的功能，创建小部件，可以用现有的部件做一些组合，成为一个全新的、自己的特有的小部件。

下面示范如何将两个按钮和一个下拉选项框这三个部件组合成一个部件，由以下几个文件构成：

1、小部件开发主体程序，ButtonFilteringSelect.js，完整三个部件的整合，以及相关事件处理。

2、小部件组合的模板，ButtonFilteringSelect.html，自定义小部件的构成。

3、小部件组合模板的CSS，ButtonFilteringSelect.css，自定义小部件的布局形式。

JS 主体程序 ButtonFilteringSelect.js，其中创建了一个 FilteringSelect 和 两个 Button 的一个部件。

// dojo.provide allows pages to use all of the types declared in this resource.

define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/ButtonFilteringSelect.html",
    "dojo/dom-style", "dijit/Calendar", "dojo/dom-construct", "dijit/form/Button", "dojo/on", "dojo/date/locale", "dojo/date",
    "dojo/_base/lang", "dojo/_base/connect", "dojo/store/Memory", "dijit/form/FilteringSelect" ], function(declare, WidgetBase,
    TemplatedMixin, template, domStyle, Calendar, domConstruct, Button, on, locale, dojoDate, lang, connect, Memory,
    FilteringSelect)
{
  return declare([ WidgetBase, TemplatedMixin ], {
    // 模板
    templateString : template,
    // 参数
    param1 : null,
    param2 : null,
    param3 : null,
    param4 : null,
    //
    // 控件
    filteringSelect : null,
    buttonLeft : null,
    buttonRight : null,

    // 重载 constructor
    // 接受传入参数
    constructor : function constructor(args)
    {
      if (args)
      {
        lang.mixin(this, args);
        // 显示传入的参数
        console.info(this.param1, this.param2, this.param3, this.param4);
      }
    },

    // 重载 postCreate
    // 创建自定义小部件内的小部件元素
    postCreate : function postCreate()
    {
      // 创建下拉控件 并与 css 控件相连
      this.filteringSelect = this.CreateFilteringSelect(null, this.filtering_select_dap);
      // ---------------------------------------------------------------

      // 创建 button_left 控件 并与 css 控件相连
      this.buttonLeft = new Button({
        label : "+",
        onClick : lang.hitch(this, function()
        {
          console.info('button1 onclick');
        })
      }, this.button_left_dap);
      // ---------------------------------------------------------------

      // 创建 button_right 控件 并与 css 控件相连
      this.buttonRight = new Button({
        label : "<",
        onClick : lang.hitch(this, function()
        {
          console.info('button2 onclick');
        })
      }, this.button_right_dap);
      // ---------------------------------------------------------------
    },

    // 创建 select 控件的实体
    // 这里传入的参数 data 并未使用，而是临时在内部创建了一个 json 对象
    CreateFilteringSelect : function CustomCreateFilteringSelect(data, filtering_select)
    {
      var parent = this;

      var stateStore = new Memory({
        data : [ {
          name : "Alabama",
          id : "AL"
        }, {
          name : "Alaska",
          id : "AK"
        }, {
          name : "American Samoa",
          id : "AS"
        }, {
          name : "Arizona",
          id : "AZ"
        }, {
          name : "Arkansas",
          id : "AR"
        }, {
          name : "Armed Forces Europe",
          id : "AE"
        } ]
      });

      return new FilteringSelect({
        name : "state",
        value : "CA",
        store : stateStore,
        searchAttr : "name",
        style : "width: auto;",
        invalidMessage : 'invalidMessage ……',
        onChange : function(value)
        {
          console.info(value);
        }
      }, filtering_select);

    },
    GetValue : function ProcedureGetValue()
    {
      var value = this.filteringSelect.get('value');
      console.debug(value);
      return value;
    },
    GetDisplayedValue : function ProcedureDisplayedValue()
    {
      var value = this.filteringSelect.get('displayedValue');
      console.debug(value);
      return value;
    },
  });
});

该部件所使用的模板，ButtonFilteringSelect.html

<div class="button_filtering_select">
	<div class="button_filtering_select_button_left">
		<div data-dojo-attach-point="button_left_dap"></div>
	</div>
	<div class="button_filtering_select">
		<div data-dojo-attach-point="filtering_select_dap"></div>
	</div>
	<div class="button_filtering_select_button_right">
		<div data-dojo-attach-point="button_right_dap"></div>
	</div>
</div>

所需的 CSS 文件 ButtonFilteringSelect.css，用于描述模板 

@CHARSET "UTF-8";

.button_filtering_select {
	position: relative; left: 0px; top: 0px; width: 250px; height: 20px; margin : 0; Padding: 0;
}

.button_filtering_select .button_filtering_select {
	float: left; top: 4px; width: 120px;
}

.button_filtering_select .button_filtering_select_button_left {
	float: left; top: 0px; width: 25x;
}

.button_filtering_select .button_filtering_select_button_right {
	float: left; top: 0px; width: 25px;
}

测试程序，index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../dojo/dojo/resources/dojo.css">
<link rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="../dojo/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="../dojo/custom/templates/ButtonFilteringSelect.css">
<script src='../dojo/dojo/dojo.js' data-dojo-config="isDebug: true, async: true"></script>
<script type="text/javascript">
  var businessCard1 = null;
  var businessCard2 = null;
  var businessCard2 = null;
  require([ "custom/ButtonFilteringSelect", "dojo/_base/connect", "dojo/domReady!" ], function(ButtonFilteringSelect, connect)
  {
    var params = {
      "param1" : "value1",
      "param2" : "value2",
      "param3" : "value3",
    };
    buttonFilteringSelect1 = ButtonFilteringSelect(params, "bcNode1");
    buttonFilteringSelect2 = ButtonFilteringSelect(params, "bcNode2");
    buttonFilteringSelect3 = ButtonFilteringSelect(params, "bcNode3");
  });
</script>
</head>
<body class="nihilo">

	<div style="position: relative; width: 200px; height: 40px;">
		<div id="bcNode1"></div>
	</div>
	<div style="position: relative; width: 200px; height: 30px;">
		<div id="bcNode2"></div>
	</div>
	<div style="position: relative; width: 400px; height: 30px;">
		<div id="bcNode3"></div>
	</div>

	<!-- 取得 buttonFilteringSelect1 的被选值 -->
	<div style="position: relative; top: 120px;">
		<button onclick="getvalue();">call</button>
	</div>

</body>

<script type="text/javascript">
  getvalue = function()
  {
    var val = buttonFilteringSelect1.GetValue();
    console.info(val);
  }
</script>
</html>

测试页显示

Q群讨论：236201801

以上演示源码 http://download.csdn.net/detail/joyous/9624109
放到 Apache HTTP 根目录即可。为了缩小压缩包，演示内的 dojo 并不完整，但演示小部件开发没问题，完整 dojo 需要到 http://dojotoolkit.org/ 下载。

参考资料

https://dojotoolkit.org/reference-guide/1.10/dijit/form/FilteringSelect.html http://blog.csdn.net/joyous/article/details/51456287 http://blog.csdn.net/joyous/article/details/51456299