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

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
?});
});

<%@ 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>