extjs Combobox级联
使用的extjs library 3.3.1,可以直接看效果,其中有一个是获取服务器端的时间的:
ClinicCostForm=Ext.extend(Ext.form.FormPanel,{
yearCbo:null,//年度CBO
statisticArray:[],//统计时间数组
dateStatisticsCbo:null,//时间统计类型cbo
statisticTimeCbo:null,//统计时间
statisticModeCbo:null,//统计方式Cbo
exportModeCbo:null,//导出方式
constructor:function(){//构造方法
//step one
this.initYearCbo();//初始化年度CBO 你懂得
//step two
this.initDateStatistic();//初始化时间统计类型
//step three
this.initStatisticArray();//初始化Store中的参数
//step four
this.initStatisticTimeCbo();//初始化统计时间Combobox
//step five
this.initStatisticModeCbo();//初始化统计方式Cbo
//step six
this.initExportModeCbo();//初始化导出方式的Cbo
//
ClinicCostForm.superclass.constructor.call(this,{
region:"north",
collapsible:true,//是否可以折叠
title:"医院住院病人查询",
collapsedTitle:true, // 折叠时候是否显示title
border:true,
height:120,
layout:'column',
border:false,
//----
items:[{//---i begin
xtype : "panel",
layout : "column",
border : false,
items:[
{
xtype:"panel",
layout:'form',
border:false,
width:130,
labelWidth:40,
items:[this.yearCbo]
},
{
xtype:"panel",
layout:'form',
border:false,
width:200,
labelWidth:80,
items:[this.dateStatisticsCbo]
},
{
xtype:"panel",
layout:'form',
border:false,
width:180,
labelWidth:40,
items:[{xtype:"datefield",fieldLabel:"日期",editable:false,name:"startDate",id:"startDate",format:'Y-m-d',width:120,disabled:true,hidden:true}]
},
{//FIXME 给日期添加隐藏,以及下一部分的Form元素的设置
xtype:"panel",
layout:'form',
border:false,
width:160,
labelWidth:20,
items:[{xtype:"datefield",fieldLabel:"至",editable:false,name:"endDate",id:"endDate",format:'Y-m-d',width:120,disabled:true,hidden:true}]
},
{
xtype:"panel",
layout:'form',
border:false,
width:180,
labelWidth:60,
items:[this.statisticTimeCbo]
},
{
xtype:"panel",
layout:'form',
border:false,
width:180,
labelWidth:60,
items:[this.statisticModeCbo]
},
{
xtype:"panel",
layout:'form',
border:false,
width:80,
labelWidth:60,
items:[{xtype:'button',text:'统计计算',hideLabel:true}]
},
{
xtype:"panel",
layout:'form',
border:false,
width:180,
labelWidth:60,
items:[this.exportModeCbo]
},
{
xtype:"panel",
layout:'form',
border:false,
width:80,
labelWidth:60,
items:[{xtype:'button',text:'导出EXCEL',hideLabel:true}]
}
]
}]//--i end
//---
});
},
//---初始化年度Combobox
initYearCbo:function(){
//annual.append("{value:'0',year:'全部',selected:false},");
var store= new Ext.data.JsonStore({
autoLoad:true,
idProperty:'value',
url:'/his/clinic_cost_statistics!ajaxGetAnnual.action',
fields:[{name:"value"},{name:'year'},{name:'selected'}],
listeners:{
load:this.setYearCboDefault,
scope:this
}
});
//
this.yearCbo=new Ext.form.ComboBox({
fieldLabel:"年 度",
triggerAction:'all',
displayField:'year',
editable:true,
valueField:'value',
name:'dbyear',
id:'dbyear',
store:store,
width:60,
listeners:{
select:this.onYearCboSelect,
scope:this
}
});
},
//--年度CBO设置默认值事件
setYearCboDefault:function(){
var store=this.yearCbo.getStore();
for(var i=0;i<store.getCount();i++){
var r=store.getAt(i).data;
if((r.selected)){
this.yearCbo.setValue(r.value);
break;
}
}
},
//---初始化实践统计类型CBO
initDateStatistic:function(){
//时间统计类型simpleStore
var store=new Ext.data.SimpleStore({
fields:['value','text'],
data:[['1','按年统计'],['2','按季统计'],['3','按月统计'],['4','按日统计']]
});
//初始化时间统计类型
this.dateStatisticsCbo=new Ext.form.ComboBox({
fieldLabel:"时间统计类型",
triggerAction:'all',
displayField:'text',
editable:true,
valueField:'value',
name:'tjlx',
id:'tjlx',
store:store,
width:100,
value:'1',
mode:'local',
listeners:{
select:this.onDateStatisticTypeSelect,
scope:this
}
});
},
//--初始化统计时间CBO
initStatisticTimeCbo:function(){
var store=new Ext.data.ArrayStore({
fields:['key','value'],
data:[['-1','本年度']]
});
this.statisticTimeCbo=new Ext.form.ComboBox({
fieldLabel:"统计时间",
triggerAction:'all',
displayField:'value',
editable:true,
valueField:'key',
name:'exaTimeType',
id:'exaTimeType',
store:store,
width:80,
value:'-1',
mode:'local'
});
},
//初始化统计时间类型Store
initStatisticArray:function(){
this.statisticArray[0]=[{key:'0',value:'全部年度'}];
this.statisticArray[1]=[{key:'-1',value:'本年度'}];
this.statisticArray[2]=[{key:'0',value:"全部"},
{key:'1',value:"第一季度"},
{key:'2',value:"第二季度"},
{key:'3',value:"第三季度"},
{key:'4',value:"第四季度"}
];
this.statisticArray[3]=[{key:'0',value:'全部'},
{key:'1',value:'一月'},
{key:'2',value:'二月'},
{key:'3',value:'三月'},
{key:'4',value:'四月'},
{key:'5',value:'五月'},
{key:'6',value:'六月'},
{key:'7',value:'七月'},
{key:'8',value:'八月'},
{key:'9',value:'九月'},
{key:'10',value:'十月'},
{key:'11',value:'十一月'},
{key:'12',value:'十二月'}
];
this.statisticArray[4]=[{key:'0',value:'全部'}];
},
//--初始化统计方式Combobox
initStatisticModeCbo:function(){
var store=new Ext.data.SimpleStore({
fields:['value','text'],
data:[['unit','按单位'],["Sections","按科室"]]
});
this.statisticModeCbo=new Ext.form.ComboBox({
fieldLabel:"统计方式",
triggerAction:'all',
displayField:'text',
editable:true,
valueField:'value',
name:'collectType',
id:'collectType',
store:store,
width:80,
value:'unit',
mode:'local'
});
},
//===初始化导出方式Combobx
initExportModeCbo:function(){
var store=new Ext.data.SimpleStore({
fields:['value','text'],
data:[['1','当前页'],["2","全部页面"]]
});
this.exportModeCbo=new Ext.form.ComboBox({
fieldLabel:"导出方式",
triggerAction:'all',
displayField:'text',
editable:true,
valueField:'value',
name:'outMeth',
id:'outMeth',
store:store,
width:80,
value:'1',
mode:'local'
});
},
//---年度的选择改变的时候
onYearCboSelect:function(combo,record,index){
newValue=parseInt(this.yearCbo.getValue());
//定义一个Record模型
var MyRecord = Ext.data.Record.create([{name:"key"},{name:"value"} ]);
//
var choice=this.dateStatisticsCbo.getValue();
//获得时间统计类型值
if(newValue==0){//非0即真
if(choice!='1'){
return;
}
//1.清空原有的Store中的元素
this.statisticTimeCbo.getStore().removeAll();
//添加值
this.statisticTimeCbo.getStore().add(new MyRecord({key:'0',value:'全部年度'}));
//设置默认值
this.statisticTimeCbo.setValue('0');
}else{
switch(parseInt(choice)){
case 1://按年统计
//1.清空原有的Store中的元素
this.statisticTimeCbo.getStore().removeAll();
//添加值
this.statisticTimeCbo.getStore().add(new MyRecord({key:'-1',value:'本年度'}));
//设置默认值
this.statisticTimeCbo.setValue('-1');
break;
case 4://按日统计
// 设定日期的值
var startDate=Ext.getCmp('startDate');
var endDate=Ext.getCmp('endDate');
if(!startDate.disabled){//代表该控件现在可用
var d=startDate.getValue();
d.setYear(newValue);
startDate.setValue(d);
}
if(!endDate.disabled){//代表该控件现在可用
var d=endDate.getValue();
d.setYear(newValue);
endDate.setValue(d);
}
break;
}
}
},
//---时间统计类型Cbo更改的时候
onDateStatisticTypeSelect:function(combo,record,index){
var startDate=Ext.getCmp('startDate');
var endDate=Ext.getCmp('endDate');
//得到时间统计类型值
var newValue=parseInt(this.dateStatisticsCbo.getValue());
//combobox显示的默认值
var cboDefaultValue;
switch(newValue){
case 4://按日统计
//设置日期控件显示
startDate.setVisible(true);
endDate.setVisible(true);
//将disable设置为可用
startDate.setDisabled(false);
endDate.setDisabled(false);
//设定日期控件默认值
var d=new Date();
//获得年度Combobox的值
var year=parseInt(this.yearCbo.getValue());
if(year!=0){//非0即真
d.setYear(year);
}
startDate.setValue(d);
endDate.setValue(d);
//设定默认值
cboDefaultValue='0';
break;
case 3://按月统计
//设定默认值
cboDefaultValue='0';
break;
case 2://按季统计
//设定默认值
cboDefaultValue='0';
break;
case 1://按年统计
if(this.yearCbo.getValue()=='0'){
cboDefaultValue='0';
}else{
cboDefaultValue='-1';
}
break;
}
//如果不是按日统计那么需要隐藏日期控件
if(newValue!=4){
startDate.setVisible(false);
endDate.setVisible(false);
startDate.setDisabled(true);
endDate.setDisabled(true);
}
//清空和填充store
this.fillDateStatisticTypeStore(newValue,cboDefaultValue);
},
//---清空原有store中的信息
//@param newValue是时间统计类型选择项值
//@param cboDefaultValue combobox默认值
fillDateStatisticTypeStore:function(newValue,cboDefaultValue){
//定义一个Record模型
var MyRecord = Ext.data.Record.create([{name:"key"},{name:"value"} ]);
var store=this.statisticTimeCbo.getStore();
//清空原有的所有元素
store.removeAll();
//添加对应元素
//添加对应的统计时间
for(var i=0;i<this.statisticArray[newValue].length;i++ ){
//得到对应的值
store.add(new MyRecord(this.statisticArray[newValue][i]));
}
//设置默认值
this.statisticTimeCbo.setValue(cboDefaultValue);
}
//---
});
java代码:也就是对应的年度的url
public String ajaxGetAnnual(){
SimpleDateFormat format= new SimpleDateFormat("yyyy");
String dateString = format.format(new Date());
//得到当前的年份
int year=Integer.parseInt(dateString);
StringBuilder annual=new StringBuilder("[");
annual.append("{value:'0',year:'全部',selected:false},");
//
for(int i=0;i<4;i++){
if( i == 0)
annual.append("{value:'"+(year-i)+"',year:'"+(year-i)+"',selected:true},");
else
annual.append("{value:'"+(year-i)+"',year:'"+(year-i)+"',selected:false},");
}
annual=new StringBuilder( annual.substring(0, annual.length()-1));
System.out.println( annual.substring(0, annual.length()-1));
annual.append("]");
//将年度信息输出
return ajaxJson(annual.toString());
}
觉得好就帮忙顶哈...