ExtJS Grid 按条件加载数据

最新推荐文章于 2017-12-21 08:34:51 发布

turkeyzhou

最新推荐文章于 2017-12-21 08:34:51 发布

阅读量4.3k

点赞数

分类专栏： ajax/extjs 文章标签： extjs function date url button header

本文链接：https://blog.csdn.net/turkeyzhou/article/details/6665222

版权

ajax/extjs 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

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来进行查询条件的加载。