1. 程式人生 > >ExtJS Grid 按條件載入資料

ExtJS Grid 按條件載入資料

var startDate=new Date().format("Y-m-d");
				var endDate=new Date().add(Date.DAY,-7).format("Y-m-d");
				var url='<%=request.getContextPath()%>/mvc?MVC_BUS=AppStat&MVC_ACTION=getList';
				
				var store=new Ext.data.Store({
					proxy:new Ext.data.HttpProxy({
						url:url
					}),
					reader:new Ext.data.JsonReader({
						totalProperties:'totalCount',
						root:'list'
					},[
						{name:'stat_data'}
					]),
					listeners:{
						beforeload:function(thiz,options){
							 Ext.apply 
				             ( 
				            	 thiz.lastOptions.params,   
				                 {  
				                     startDate : startDate,  
				                     endDate : endDate
				                 } 
				             );
						}
					}
				});
				
				var columnModel=new Ext.grid.ColumnModel([
					    {header:'日期',dataIndex:'stat_data'}
				]);
				
				var grid=new Ext.grid.GridPanel({
					cm:columnModel,
					store:store,
					renderTo:'grid',
					autoHeight:true,
					viewConfig:{
						forceFit:true
					},
					bbar:new Ext.PagingToolbar({
						pageSize:20,
						store:store,
						loadMask:true,
						stripeRows:true,
						displayInfo:true,
						displayMsg:'顯示第{0}條到第{1}條,一共{2}條',
						emptyMsg:'無記錄'
					})
				});
				
				var form=new Ext.form.FormPanel({
					renderTo:'data_setting_div',
					labelAlign:'right',
					labelWidth:60,
					items:[
						{
							xtype: 'compositefield',
			                fieldLabel: '日期範圍',
			                defaults:{
			                	width:150
			                },
							items:[
								{xtype:'datefield',id:'startdate',name:'startdate'},
								{xtype:'displayfield',value:'--',width:10},
								{xtype:'datefield',name:'enddate',id:'enddate'},
								{xtype:'button',text:'查詢',listeners:{
									click:function(){
										startDate=form.getForm().findField("startdate").getValue().format('Y-m-d');
										endDate=form.getForm().findField("enddate").getValue().format('Y-m-d');
										/**
										Ext.apply 
							             ( 
							            	 store.lastOptions.params,   
							                 {  
							                     startDate : startDate1,  
							                     endDate : endDate1,
							                     fromButton:'query'
							                 } 
							             );
										*/
										store.reload();
									}
								}}
							]
						}
				   ]
				});
				
				store.load({params:{start:0, limit:20,fromButton:'refresh'}});
利用beforeloader來進行查詢條件的載入。