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

觉得好就帮忙顶哈...