Ext实现添删查改二

上一篇中提到了列表显示、增加、删除。这篇说下修改和条件查询。
转载请注明出处：http://simplehumn.iteye.com/blog/486269
2.2修改
第一种方式
先贴代码
tbar里的items这样写的

......
{
	text:'<img src="/lncrm/resources/images/img/cog_edit.png"/>修改'	,
	tooltip : '修改会期',
	handler : hqUpdate
}
......

hqUpdate方法,弹出窗口并初始化数据

//修改会期
var hqUpdate = function(){
	var record = sm.getSelected();
	if(record&&sm.getCount()==1){
		form = dhhhqWindow(record,"update");
		form.getForm().reset();
	    form.getForm().loadRecord(record);//修改时带入数据
	}else{
		Ext.Msg.alert('友情提示','您必须且只能选择一行数据以便进行办理！');
	}
}

窗口写成一个function，利于对象的销毁和创建，方法里传了2个参数，做判断或提交验证（数据库层），关于界面的allowBlank:false验证不多说，网上很多例子。最后附上弹出窗口的图片附件。

var widthValue = 150;
var nowYear = new Date().getYear();
// 日期范围代码
Ext.apply(Ext.form.VTypes, {
	daterange : function(val, field) {
		var date = field.parseDate(val);

		// We need to force the picker to update values to recaluate the
		// disabled dates display
		var dispUpd = function(picker) {
			var ad = picker.activeDate;
			picker.activeDate = null;
			picker.update(ad);
		};

		if (field.startDateField) {
			var sd = Ext.getCmp(field.startDateField);
			sd.maxValue = date;
			if (sd.menu && sd.menu.picker) {
				sd.menu.picker.maxDate = date;
				dispUpd(sd.menu.picker);
			}
		} else if (field.endDateField) {
			var ed = Ext.getCmp(field.endDateField);
			ed.minValue = date;
			if (ed.menu && ed.menu.picker) {
				ed.menu.picker.minDate = date;
				dispUpd(ed.menu.picker);
			}
		}
		/*
		 * Always return true since we're only using this vtype to set the
		 * min/max allowed values (these are tested for after the vtype test)
		 */
		return true;
	}
});
//新增或修改会期弹出窗口
var dhhhqWindow = function(record,update){
	//会期信息
	var hqInfo = new Ext.form.FieldSet({
		title: '会期信息',
        collapsible: true,
        autoHeight:true,
        bodyStyle:'width:100%;',
        labelWidth : 100,
		labelAlign : 'right',
        items:[{
			layout:'column',//从左往右的布局				
			items:[{
				columnWidth:.5,
				layout:'form',
				//labelWidth : 60,
				items:[{
					xtype : 'textfield',
					fieldLabel : '会期编号',
					allowBlank : false,
					name : 'dhhhqCommonId',
					width : widthValue
				},{      
					xtype : "datefield",  
					id:'dhhhqStartDate',
					name : 'dhhhqStartDate',
					fieldLabel : "会期开始日期",
					emptyText : 'YYYY-MM-DD',
					allowBlank : false,
					width : widthValue,
					vtype : 'daterange',
					format : 'Y-m-d', // 指定日期格式，年-月-日
					endDateField : 'dhhhqEndDate'
				}]
			},{
				columnWidth:.5,
				layout:'form',
				//labelWidth : 60,
				items:[{
					xtype : 'textfield',
					fieldLabel : '会期名称',
					allowBlank : false,
					name : 'dhhhqName',
					width : widthValue
				},{      
					xtype : "datefield",  
					id:'dhhhqEndDate',
					name : 'dhhhqEndDate',
					fieldLabel : "会期结束日期", 
					allowBlank : false,
					emptyText : 'YYYY-MM-DD',
					width : widthValue,
					format : 'Y-m-d', // 指定日期格式，年-月-日
					// value:new Date(), //默认当前时间
					vtype : 'daterange',
					startDateField :'dhhhqStartDate'
				}]
			}]
		},{
			layout:'column',//从左往右的布局				
			items:[{
				columnWidth:.6,
				layout:'form',
				items:[{
					xtype : 'textarea',
					fieldLabel : '会期说明',
					name : 'dhhhqDescribe',
					regex:/^.{0,100}$/,
					regexText:'会期说明不超过100字',
					width : 350
				}]
			},{
				columnWidth:.3,
				layout:'form',
				items:[{
					html : '(会期说明不超过100字)'
				}]
			}]
		}]
	});
	
	// 弹出窗口“订货会会期”的按钮集合
	var hqButtons = [{
		xtype : 'submit',
		text : '修改',
		handler : function() {
			if(dhhhqForm.getForm().isValid()){
				dhhhqForm.getForm().submit({ 
					url:'../../om/dhhDate.do', 
					params:{method:'saveOrUpdateDhhDate'}, 
					method:'post', 
					waitMsg:'正在保存，请稍等...', 
					success:function(form,action){ 
						  hqWindow.destroy();
						  Ext.Msg.alert("友情提示","保存目标成功!",
								function(){
									hqStore.reload();
								},this
							);
					}, 
					failure:function(form,action){
						Ext.MessageBox.alert("友情提示", "服务器出现错误请稍后再试！");
					} 
				}); 
			}
		}
	}, {
		text : '取消',
		handler : function() {
			hqWindow.destroy();
		}
	}];
	
	var dhhhqForm = new Ext.FormPanel({
		bodyStyle : 'padding:5px',
		frame : true,
		name : 'dhhhqForm',
		layoutOnTabChange : true,
		autoHeight : true,
		autoWidth : true,
		labelWidth : 100,
		labelAlign : 'right',
		items : [hqInfo]
	});
	
	// 将表单放到一个窗口中，并显示
	var hqWindow = new Ext.Window({
		title : "会期信息",
		width : 850,
		height : 420,
//		autoHeight : true,
		autoScroll : true,
		collapsible : true,
		maximizable : true,
		layout : 'fit',
		modal : true,
		items : [dhhhqForm]
	});

	hqWindow.show();
	return dhhhqForm;
};

说明：
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {。。。。。。});
这段的意思是，让日期控件可以控制2个日期“开始日期”不小于“结束日期”，使用方法如"会期开始日期"、"会期结束日期"。
修改时初始化的数据是显示grid列表时和json串一起传到前台，var record = sm.getSelected();这样选中这行把record带入弹出窗口就能初始化。grid的store里可以传你想要的任何数据，也就是说 （var hqStore = new Ext.data.JsonStore({fields:[......]});）数据里的fields的项数可以比（var cm = new Ext.grid.ColumnModel([......]);）表头的项数多，修改时初始化的数据都应经在界面的grid里了。

第二种方式
上面的这种方法是，查询时把数据以json形式都传到前台grid的store里，然后修改或查看详情时，不再查询数据库，直接从界面拿数据。
但是这种方法有时候不能满足业务需求，下面介绍另一种方式：打开弹出窗口时，调后台方法初始化数据。
修改按钮有所改变，加了一个hqForm.load({......})

var dhhButton = [{
	xtype : 'submit',
	text : '修改',
	handler : function() {
		if(selectDhhForm.getForm().isValid()){
			dhhWindow.destroy();
			var dhhId = selectDhhForm.form.findField('javaid').getValue();
			var hqForm = dhhhqWindow();
			hqForm.load({
				url : '../../om/dhhDate.do?method=initDhhDate&dhhId='+ dhhId,
				waitMsg : '正在载入数据，请稍等...',
				method:"get",
				success:function(form,action){},
				failuer : function(){
					 Ext.Msg.alert('友情提示', '数据加载失败请重试！');
				}
			});
		}
	}
}];

弹出窗口的formpanel也有所变化

var dhhhqForm = new Ext.FormPanel({
	bodyStyle : 'padding:5px',
	frame : true,
	name : 'dhhhqForm',
	layoutOnTabChange : true,
	autoHeight : true,
	autoWidth : true,
	labelWidth : 100,
	labelAlign : 'right',
	reader : new Ext.data.JsonReader({
        root:'root'
    }, [
    	{name: 'dhhId', mapping:'dhhId'},
        {name: 'commonId', mapping:'commonId'},
        {name: 'brand', mapping:'brand'},
        {name: 'dhhStartDate', mapping:'dhhStartDate'},
        {name: 'dhhEndDate', mapping:'dhhEndDate'},
        {name: 'name', mapping:'name'},
        {name: 'area', mapping:'area'} 
    ]),
	items : [hqInfo]
});

多了个reader : new Ext.data.JsonReader({}),reader里的值就是界面想要的值，后台以json串形式发过来，这里按照这种格式接收就OK了。

2.3查询
这里的查询是指，界面输入或选择一些条件，然后点击查询按钮，显示符合条件的数据。至于条件跟formpanel差不多，点击按钮的时候也是提交form，这里不在写查询条件的代码。在完成grid列表以后，只需修改一小部分就可以实现查询功能。
以下是查询按钮，hqStore.removeAll();先清掉grid数据，hqStore.baseParams 查询时的参数都写在这里（参考yourgame在javaeye里的一段回复），hqStore的URL里不带任何参数，然后hqStore.reload({params:{start:0,limit:10}});好了到这里查询就OK了，只刷新grid数据界面无刷新。hqStore.baseParams 是关键。

new Ext.Button({
	text : '查询',
	minWidth : 60,
	handler : function() {
		hqStore.removeAll();
		// 查询时传参数要用这种方式,否则翻页的时候这些参数无效
		hqStore.baseParams = {departmentarea : Ext.get('departmentarea').getValue(),status : Ext.get('status').getValue(),status : Ext.get('status').getValue(), dhhYear : Ext.get('dhhYear').getValue(), javaid : Ext.get('javaid').getValue()  }; 
		hqStore.reload({params:{start:0,limit:10}});
	}
})

说明：hqStore.baseParams 里面，前面那个是参数名称name，冒号后面的是值value，多个参数以逗号分开。
[/size]