上一篇中提到了列表显示、增加、删除。这篇说下修改和条件查询。
转载请注明出处: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]