使用的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());
}覺得好就幫忙頂哈...