Ext上multiselect

最新推荐文章于 2016-04-07 18:02:26 发布

zdpdyz123

最新推荐文章于 2016-04-07 18:02:26 发布

阅读量140

点赞数

文章标签： EXT CSS prototype HTML

本文链接：https://blog.csdn.net/zdpdyz123/article/details/83800299

版权

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>


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