使用的extjs library 3.3.1,可以直接看效果,其中有一個(gè)是獲取服務(wù)器端的時(shí)間的:

ClinicCostForm=Ext.extend(Ext.form.FormPanel,{ yearCbo:null,//年度CBO statisticArray:[],//統(tǒng)計(jì)時(shí)間數(shù)組 dateStatisticsCbo:null,//時(shí)間統(tǒng)計(jì)類型cbo statisticTimeCbo:null,//統(tǒng)計(jì)時(shí)間 statisticModeCbo:null,//統(tǒng)計(jì)方式Cbo exportModeCbo:null,//導(dǎo)出方式 constructor:function(){//構(gòu)造方法 //step one this.initYearCbo();//初始化年度CBO 你懂得 //step two this.initDateStatistic();//初始化時(shí)間統(tǒng)計(jì)類型 //step three this.initStatisticArray();//初始化Store中的參數(shù) //step four this.initStatisticTimeCbo();//初始化統(tǒng)計(jì)時(shí)間Combobox //step five this.initStatisticModeCbo();//初始化統(tǒng)計(jì)方式Cbo //step six this.initExportModeCbo();//初始化導(dǎo)出方式的Cbo // ClinicCostForm.superclass.constructor.call(this,{ region:"north", collapsible:true,//是否可以折疊 title:"醫(yī)院住院病人查詢", collapsedTitle:true, // 折疊時(shí)候是否顯示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元素的設(shè)置 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:'統(tǒng)計(jì)計(jì)算',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:'導(dǎo)出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設(shè)置默認(rèn)值事件 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; } } }, //---初始化實(shí)踐統(tǒng)計(jì)類型CBO initDateStatistic:function(){ //時(shí)間統(tǒng)計(jì)類型simpleStore var store=new Ext.data.SimpleStore({ fields:['value','text'], data:[['1','按年統(tǒng)計(jì)'],['2','按季統(tǒng)計(jì)'],['3','按月統(tǒng)計(jì)'],['4','按日統(tǒng)計(jì)']] }); //初始化時(shí)間統(tǒng)計(jì)類型 this.dateStatisticsCbo=new Ext.form.ComboBox({ fieldLabel:"時(shí)間統(tǒng)計(jì)類型", 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 } }); }, //--初始化統(tǒng)計(jì)時(shí)間CBO initStatisticTimeCbo:function(){ var store=new Ext.data.ArrayStore({ fields:['key','value'], data:[['-1','本年度']] }); this.statisticTimeCbo=new Ext.form.ComboBox({ fieldLabel:"統(tǒng)計(jì)時(shí)間", triggerAction:'all', displayField:'value', editable:true, valueField:'key', name:'exaTimeType', id:'exaTimeType', store:store, width:80, value:'-1', mode:'local' }); }, //初始化統(tǒng)計(jì)時(shí)間類型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:'全部'}]; }, //--初始化統(tǒng)計(jì)方式Combobox initStatisticModeCbo:function(){ var store=new Ext.data.SimpleStore({ fields:['value','text'], data:[['unit','按單位'],["Sections","按科室"]] }); this.statisticModeCbo=new Ext.form.ComboBox({ fieldLabel:"統(tǒng)計(jì)方式", triggerAction:'all', displayField:'text', editable:true, valueField:'value', name:'collectType', id:'collectType', store:store, width:80, value:'unit', mode:'local' }); }, //===初始化導(dǎo)出方式Combobx initExportModeCbo:function(){ var store=new Ext.data.SimpleStore({ fields:['value','text'], data:[['1','當(dāng)前頁(yè)'],["2","全部頁(yè)面"]] }); this.exportModeCbo=new Ext.form.ComboBox({ fieldLabel:"導(dǎo)出方式", triggerAction:'all', displayField:'text', editable:true, valueField:'value', name:'outMeth', id:'outMeth', store:store, width:80, value:'1', mode:'local' }); }, //---年度的選擇改變的時(shí)候 onYearCboSelect:function(combo,record,index){ newValue=parseInt(this.yearCbo.getValue()); //定義一個(gè)Record模型 var MyRecord = Ext.data.Record.create([{name:"key"},{name:"value"} ]); // var choice=this.dateStatisticsCbo.getValue(); //獲得時(shí)間統(tǒng)計(jì)類型值 if(newValue==0){//非0即真 if(choice!='1'){ return; } //1.清空原有的Store中的元素 this.statisticTimeCbo.getStore().removeAll(); //添加值 this.statisticTimeCbo.getStore().add(new MyRecord({key:'0',value:'全部年度'})); //設(shè)置默認(rèn)值 this.statisticTimeCbo.setValue('0'); }else{ switch(parseInt(choice)){ case 1://按年統(tǒng)計(jì) //1.清空原有的Store中的元素 this.statisticTimeCbo.getStore().removeAll(); //添加值 this.statisticTimeCbo.getStore().add(new MyRecord({key:'-1',value:'本年度'})); //設(shè)置默認(rèn)值 this.statisticTimeCbo.setValue('-1'); break; case 4://按日統(tǒng)計(jì) // 設(shè)定日期的值 var startDate=Ext.getCmp('startDate'); var endDate=Ext.getCmp('endDate'); if(!startDate.disabled){//代表該控件現(xiàn)在可用 var d=startDate.getValue(); d.setYear(newValue); startDate.setValue(d); } if(!endDate.disabled){//代表該控件現(xiàn)在可用 var d=endDate.getValue(); d.setYear(newValue); endDate.setValue(d); } break; } } }, //---時(shí)間統(tǒng)計(jì)類型Cbo更改的時(shí)候 onDateStatisticTypeSelect:function(combo,record,index){ var startDate=Ext.getCmp('startDate'); var endDate=Ext.getCmp('endDate'); //得到時(shí)間統(tǒng)計(jì)類型值 var newValue=parseInt(this.dateStatisticsCbo.getValue()); //combobox顯示的默認(rèn)值 var cboDefaultValue; switch(newValue){ case 4://按日統(tǒng)計(jì) //設(shè)置日期控件顯示 startDate.setVisible(true); endDate.setVisible(true); //將disable設(shè)置為可用 startDate.setDisabled(false); endDate.setDisabled(false); //設(shè)定日期控件默認(rèn)值 var d=new Date(); //獲得年度Combobox的值 var year=parseInt(this.yearCbo.getValue()); if(year!=0){//非0即真 d.setYear(year); } startDate.setValue(d); endDate.setValue(d); //設(shè)定默認(rèn)值 cboDefaultValue='0'; break; case 3://按月統(tǒng)計(jì) //設(shè)定默認(rèn)值 cboDefaultValue='0'; break; case 2://按季統(tǒng)計(jì) //設(shè)定默認(rèn)值 cboDefaultValue='0'; break; case 1://按年統(tǒng)計(jì) if(this.yearCbo.getValue()=='0'){ cboDefaultValue='0'; }else{ cboDefaultValue='-1'; } break; } //如果不是按日統(tǒng)計(jì)那么需要隱藏日期控件 if(newValue!=4){ startDate.setVisible(false); endDate.setVisible(false); startDate.setDisabled(true); endDate.setDisabled(true); } //清空和填充store this.fillDateStatisticTypeStore(newValue,cboDefaultValue); }, //---清空原有store中的信息 //@param newValue是時(shí)間統(tǒng)計(jì)類型選擇項(xiàng)值 //@param cboDefaultValue combobox默認(rèn)值 fillDateStatisticTypeStore:function(newValue,cboDefaultValue){ //定義一個(gè)Record模型 var MyRecord = Ext.data.Record.create([{name:"key"},{name:"value"} ]); var store=this.statisticTimeCbo.getStore(); //清空原有的所有元素 store.removeAll(); //添加對(duì)應(yīng)元素 //添加對(duì)應(yīng)的統(tǒng)計(jì)時(shí)間 for(var i=0;i<this.statisticArray[newValue].length;i++ ){ //得到對(duì)應(yīng)的值 store.add(new MyRecord(this.statisticArray[newValue][i])); } //設(shè)置默認(rèn)值 this.statisticTimeCbo.setValue(cboDefaultValue); } //--- });
java代碼:也就是對(duì)應(yīng)的年度的url

public String ajaxGetAnnual(){ SimpleDateFormat format= new SimpleDateFormat("yyyy"); String dateString = format.format(new Date()); //得到當(dāng)前的年份 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()); }

覺(jué)得好就幫忙頂哈...

轉(zhuǎn)載于:https://www.cnblogs.com/hibernate3-example/archive/2012/04/23/2492379.html

總結(jié)

以上是生活随笔為你收集整理的extjs Combobox级联的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。