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 == 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: [], //去掉的话，原始数据为空，因为是动态的，所以这里可以不定义
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==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 =;//multiselect的data形式为[["value","text"],["value","text"]...]，接下来要把数据转化为object
for(var i = 0; i<data.length;i++){
item = data;
itemObj = new Object();
itemObj.value = item;//将object转化为一个记录
itemObj.text = item;////向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:
}]
});
win.show();
}
}]
}]
});
//定义主panel
var panel = new Ext.Panel({
id : 'panel_id',
frame : true,
autoScroll : true,
items : [{
layout : "fit",
items:
}],
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>
页:
[1]