首页  »   编程

Ext下multiselect

网友分享于:2013-12-19  浏览:210次
Ext上multiselect
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>

相关解决方案

最新解决方案