multiselect动态添加DatePicker选中的日期并显示

最近有个需求，需要点击“添加日期按钮”弹出窗口对日期进行添加并将所选日期动态添加到multiselect上并显示，此外还需实现multiselect上单个或全部清除的功能。
     Ext上multiselect的官方例子都是静态数据的，网上搜了下，这方面的资料也很少，有的话也要用到json数据实现。但是我的需求中multiselect要显示的数据只是几个日期值，可以说是个一维数组而已，不想那么复杂。结合网上稀少的资料，想出了以下方案实现。

先贴以下myMultiselect.js的代码

写道

Ext.onReady(function() {
 Ext.BLANK_IMAGE_URL = "<%=path%>/ext2/resources/images/default/s.gif";
 Ext.QuickTips.init();
 Ext.form.Field.prototype.msgTarget = 'side';
 var count = 0;//日期计数器，最大值为9，即最多添加10个时段
 var addDay = [];//用于放添加日期，并为multiselect提供原始数据，格式为YYYY/MM/DD
 /*
 **重写Array.prototype.remove，让其可以指定值删除数组元素
 */
 Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
 /*
 **定义添加日期monitorFeildSet
 */
 var monitorFeildSet = new Ext.form.FieldSet({
  title : '添加日期',
  collapsible : true,
  autoHeight : true,
  autoWidth : true,
  items:[{
      deferredRender : false,
   id : 'monitorPanel',
   width : 500,
   height : 180,
   frame : true,
   region : 'center',
   items : [{
             xtype:"multiselect",
             fieldLabel:"Multiselect<br/>(Required)",
             name:"multiselect",
             id:"multiselect",
             dataFields:["value", "text"],
             valueField:"value",
             displayField:"text",
             width:480,
             height:130,
             allowBlank:false,
             //data: [[1,123]], //去掉的话，原始数据为空，因为是动态的，所以这里可以不定义
    tbar:[{
              cls : 'x-btn-text-icon manager_delete',
                 text:"删除日期",
                 handler:function(){
                     if(count!=0){//记录为0不作任何操作
                      var record =Ext.getCmp("multiselect").store.getAt(Ext.getCmp("multiselect").view.getSelectedIndexes());
                      if(record==null||record==''){//没选择情况下删除的处理
                    alert("请选择一个日期！");
                   }else{
                    Ext.getCmp("multiselect").store.remove(record);//用remove()删除单个记录
                    addDay.remove(record.get('text'));//从addDay数组删除指定值
                       count=count-1;//日期计数器减1
                   }
                     }
              }
             },{
              cls : 'x-btn-text-icon manager_delete',
                 text:"全部清除",
                 handler:function(){
                     Ext.getCmp("multiselect").store.removeAll();//用removeAll()删除所有记录
                     addDay = new Array();//清空addDay
                     count=0;//日期计数器清0
              }
             }]
         }],
         buttons : [{
    cls : 'x-btn-text-icon manager_add',
    text : '添加日期',
    handler : function(){
     var dp = new Ext.DatePicker({
      id:'dp_id',
      handler:function(){
       if(count<=9){
           var action=true;//用以判断添加日期是否重复，重复则为false
           for(var i=0;i<addDay.length;i++){
               if(addDay[i]==Ext.util.Format.date(Ext.getCmp("dp_id").getValue(),'Y/m/d')){
                action=false;
               }
           }        
           if(action==true){//如果添加的日期不重复则执行
               addDay.push(Ext.util.Format.date(Ext.getCmp("dp_id").getValue(),'Y/m/d'));//把要添加的日期放到addDay
         var item = [],itemObj,record;
            var dataItem =[];//一个dataItem其实就是一个multiselect的record的原始数据["value","text"]，但需要把dataItem转化成object，然后再转化为一个记录record才可添加到multiselect的store里面
            dataItem.push(count);//把计数器count作为multiselect的displayField
            dataItem.push(Ext.util.Format.date(Ext.getCmp("dp_id").getValue(),'Y/m/d'));//把所选日期作为multiselect的valueField
            var data =  [dataItem];//multiselect的data形式为[["value","text"],["value","text"]...]，接下来要把数据转化为object
         for(var i = 0; i<data.length;i++){
          item = data[i];
          itemObj = new Object();
          itemObj.value = item[0];//将object转化为一个记录
          itemObj.text = item[1];////向store添加记录
          record = new Ext.data.Record(itemObj);//将object转化为一个记录           
          Ext.getCmp("multiselect").store.add(record); //向store添加记录
         }
         Ext.getCmp("multiselect").reset();//刷新下multiselect
         count = count+1;//日期计数器加1
         win.close();
           }else alert("不能添加相同的日期！");
          }else alert("抱歉，目前只能添加不超过10个日期！");
      }
     });
     var win = new Ext.Window({
      id:"win_id",
      title:"添加日期",
            width:196,
            height:228,
            items : [{
                width:196,
             height:228,
             items:[dp]
            }]
     });
     win.show();
    }
   }]
  }]
 });
 //定义主panel
 var panel = new Ext.Panel({
     id : 'panel_id',
  frame : true,
  autoScroll : true,
  items : [{
   layout : "fit",
   items:[monitorFeildSet]
  }],
     buttons : [{
      text:"保存",
      handler : function(){
      }
     }]
 });
 new Ext.Viewport({
  layout : "fit",
  items : panel
 });
});

 把jsp的代码也给了吧：

写道

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title></title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="<%=path%>/ext2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<%=path%>/css/desktop.css" />
<style type="text/css">
* {
font-size: 8pt;
font-family: "Tahoma";
}
</style>
<script type="text/javascript" src="<%=path%>/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=path%>/ext2/ext-all.js"></script>

<!-- multiselect -->
<link rel="stylesheet" type="text/css" href="<%=path%>/js/monitor_time/multiselect.css"/>
<script type="text/javascript" src="<%=path%>/js/monitor_time/DDView.js"></script>
<script type="text/javascript" src="<%=path%>/js/monitor_time/MultiSelect.js"></script>
<script type="text/javascript" src="<%=path%>/js/monitor_time/ItemSelector.js"></script>
<script type="text/javascript" src="<%=path%>/js/monitor_time/myMultiselect.js"></script>
</head>

<body>
</body>
</html>

 

还有multiselect.css，MultiSelect.js，ItemSelector.js，DDView.js也给下

本例子是用Ext2做的，已运行过。