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

觉得好就帮忙顶哈...

转载于:https://www.cnblogs.com/hibernate3-example/archive/2012/04/23/2492379.html

extjs Combobox级联相关推荐

  1. ExtJS ComboBox 按拼字首字母过滤

    网上查询了一下关于ComboBox 按拼字首字母过滤的文章,有的写的很烂,要不就是不是很清晰明了.以下是我整理的代码,在此感谢提供ChinesePY.js(不知如何将文件一并传上来,各位可以在我的博客 ...

  2. 45. ExtJS ComboBox 下拉列表详细用法

    转自:https://blog.csdn.net/luckypeng/article/details/46496151 ComboBox 是ExtJS中经常用到的控件,今天我们来讲一下它的一些用法. ...

  3. ExtJs ComboBox 在IE 下 自动完成功能无效的解决方案

    使用 ComboBox 来作为自动完成的组件,就像google suggestion ,可是在IE下怎么也无法输入字符,是处于不可编辑状态,而firefox和chrome都正常显示.我在2个ExtJs ...

  4. extjs combobox column布局为什么折叠在一起

    以下是代码: extjs libriry 3.3.1 /** * 人员基本信息查询Form */ //--------------------------Combobox MyComboBox=Ext ...

  5. easyui中combobox级联问题

    2019独角兽企业重金招聘Python工程师标准>>> 今天再easyui中遇到combobox的级联问题,记录一下. 转载于:https://my.oschina.net/miao ...

  6. ExtJS ComboBox 异步读取项后默认选中某项

    其实异步无法到位,很多网友使用了comboBox.setValue(value);抱怨说虽然选中了,但是当前显示的文字也变成了valueField,而displayField不见了,当然再次选择之后及 ...

  7. extjs combobox分页查询

    IE6.0++ extjs3.3.1 以下就是代码: /** * YHC */ /** * 分页的Combobox */ PagingMedicalcareCbo=Ext.extend(Ext.for ...

  8. extjs combobox分页加载数据不显示

    在加一个事件之前是对的可以加载,但是在添加一个事件之后,不可显示了,以下是错误的代码 /** * YHC */ /** * 分页的Combobox */ PagingMedicalcareCbo=Ex ...

  9. extjs combobox下拉框显示位置问题

    问题描述:(下拉框显示的不在combobox的下端) 问题代码: { //baseCls:"x-plain",//强制与颜色 匹配 layout:"form", ...

最新文章

  1. 彻底理解js中this
  2. 利用正高Dolphin智能广告监测系统做好违法广告监测
  3. ch5 MySQL 备份与恢复
  4. tc溜溜865手机投屏卡_这台手机智商为零,却要挑战小米华为!
  5. Javascript中函数中定义变量无var
  6. 详解布隆过滤器的原理、使用场景和注意事项
  7. hdu 4143 A Simple Problem 数论
  8. win7链接html线到屏幕上,为你解决win7系统html文件图标变成空白的具体技巧 - win7吧...
  9. [HNOI2012]矿场搭建
  10. android 组件路由框架,XRouter:组件化路由框架
  11. 游戏股的年过完了,盈利下滑,有企业靠卖房维持业绩
  12. 1-springboot基础
  13. 2014年电大计算机应用基础考,2017年电大计算机应用基础网考精彩试题与问题详解...
  14. To程序员:要写出好代码,你需要懂点儿“底层思维”
  15. opencv的第一个lena图片显示
  16. 浏览器Cookie详解
  17. 异数OS-星星之火(二)--远程实验室注册开放
  18. 23000字,信息流广告分析基础!
  19. 【转】家庭影院的音频线改如何布置
  20. Aristocracy, Democracy, and System Design 读书笔记

热门文章

  1. 在java中下列描述错误的是_在 JAVA 中 , 关于类的方法 , 下列描述错误的是 ()._学小易找答案...
  2. Circuit Breaker(电路熔断器)模式原理
  3. leetcode算法题--设计链表
  4. leetcode算法题--二叉树中的列表★
  5. xampp去运行php文件_从0开始构建一个属于你自己的PHP框架
  6. gcc的调试调研——gdb
  7. C#发现之旅第十四讲 基于动态编译的VB.NET脚本引擎
  8. Squid正向代理矩阵
  9. php7下安装event扩展
  10. 【Java并发编程】—–“J.U.C”:ConcurrentLinkedQueue