Ext的Calender实例编辑

来源：互联网发布：淘宝英文店铺名字大全编辑：程序博客网时间：2024/05/16 07:47

1、数据：修改data里面的Calenders.js和Event.js里的数据

Calenders.js

原来的数据位：

Ext.define('Ext.calendar.data.Calendars', {
statics: {
getData: function(){
return {
"calendars":[{
"id": 1,
"title": "Home"
},{
"id": 2,
"title": "Work"
},{
"id": 3,
"title": "School"
}]
};
}
}
});

修改为：

Ext.define('Ext.calendar.data.Calendars', {
statics: {
getData: function(){
var result = null;
Ext.Ajax.request({//去数据库中请求日历类型的数据
async : false,//同步请求数据
url:'calendar!query.do',
success:function(response){

/*返回的数据为：{success:true,page:1,results:2,items:[{"createTime":"","createUser":"","id":1,"modifyTime":"","modifyUser":"","tableName":"","title":"work"},{"createTime":"","createUser":"","id":2,"modifyTime":"","modifyUser":"","tableName":"","title":"holiday"}]}*/
var json = Ext.JSON.decode(response.responseText);//将得到的数据转换成json
result = json.items;
}
});
return {
"calendars":result
};
}
}
});

原来的Events.js:

Ext.define('Ext.calendar.data.Events', {

statics: {
getData: function() {
var today = Ext.Date.clearTime(new Date()),
makeDate = function(d, h, m, s) {
d = d * 86400;
h = (h || 0) * 3600;
m = (m || 0) * 60;
s = (s || 0);
return Ext.Date.add(today, Ext.Date.SECOND, d + h + m + s);
};

return {
"evts": [{
"id": 1100,
"cid": 2,
"title": "sssssssssssssss",
"start": makeDate(40, 10),
"end": makeDate(45, 15),
"notes": "Have fun"
}, {
"id": 1001,
"cid": 1,
"title": "Vacation",
"start": makeDate(-20, 10),
"end": makeDate(-10, 15),
"notes": "Have fun"
}, {
"id": 1002,
"cid": 2,
"title": "Lunch with Matt",
"start": makeDate(0, 11, 30),
"end": makeDate(0, 13),
"loc": "Chuy's!",
"url": "http://chuys.com",
"notes": "Order the queso",
"rem": "15"
}, {
"id": 1003,
"cid": 3,
"title": "Project due",
"start": makeDate(0, 15),
"end": makeDate(0, 15)
}, {
"id": 1004,
"cid": 1,
"title": "Sarah's birthday",
"start": today,
"end": today,
"notes": "Need to get a gift",
"ad": true
}, {
"id": 1005,
"cid": 2,
"title": "A long one...",
"start": makeDate(-12),
"end": makeDate(10, 0, 0, -1),
"ad": true
}, {
"id": 1006,
"cid": 3,
"title": "School holiday",
"start": makeDate(5),
"end": makeDate(7, 0, 0, -1),
"ad": true,
"rem": "2880"
}, {
"id": 1007,
"cid": 1,
"title": "Haircut",
"start": makeDate(0, 9),
"end": makeDate(0, 9, 30),
"notes": "Get cash on the way"
}, {
"id": 1008,
"cid": 3,
"title": "An old event",
"start": makeDate(-30),
"end": makeDate(-28),
"ad": true
}, {
"id": 1009,
"cid": 2,
"title": "Board meeting",
"start": makeDate(-2, 13),
"end": makeDate(-2, 18),
"loc": "ABC Inc.",
"rem": "60"
}, {
"id": 1010,
"cid": 3,
"title": "Jenny's final exams",
"start": makeDate(-2),
"end": makeDate(3, 0, 0, -1),
"ad": true
}, {
"id": 1011,
"cid": 1,
"title": "Movie night",
"start": makeDate(2, 19),
"end": makeDate(2, 23),
"notes": "Don't forget the tickets!",
"rem": "60"
}]
}
}
}
});

修改后的为：

Ext.define('Ext.calendar.data.Events', {
statics: {
getData: function() {
var result = null;
var today = Ext.Date.clearTime(new Date()), //得到今天的日期时间
Ext.Ajax.request({
url:'schedule!query.do',//从数据库查找日历时间
async:false,
success:function(response){
var json = Ext.JSON.decode(response.responseText);//
Ext.each(json.items,function(el){//遍历返回的数据
el.startTime = new Date(Date.parse(el.startTime.replace(/-/g,"/")));//将数据中的startTime和endTime（返回的为string）类型转换成date类型
el.endTime = new Date(Date.parse(el.endTime.replace(/-/g,"/")));
});
result = json.items;
}
});
return {
"evts": result
};
}
}
});

2、将EventMapping.js和CalenderMapping.js里面的数据类型和bean里面的相匹配。

3、将form里面的field里面的DateRange.js 里面的timeFormat: Ext.Date.use24HourTime ? 'G:i' : 'g:i A',（12小时制）改为timeFormat:'G:i'（24小时制）

4、在EventWindow.js中更改每个文本的name值与action中的数据一致

在updataRecord中将：

fields.each(function(f) {
name = f.name;
if (name in values) {
obj[name] = values[name];
}
});

修改为：

this.formPanel.items.each(function(f){//由于每个文本框的name更改了，则根据name则得不到文本框的内容，所以更改为根据id值得到文本框的内容
obj[f.id] = Ext.getCmp(f.id).getValue();
});

5、onSave方法改为：

onSave: function(){
if(Ext.getCmp('EventId').getValue()==0){
Ext.getCmp('EventId').setValue();
}
var form = this.formPanel.form;//得到这个form
var me = this;
if(!this.formPanel.form.isValid()){
return;
}
Ext.Ajax.request({
async:false,
url:'schedule!save.do',
params:form.getValues(),
method:'post',
success:function(){
if(!me.updateRecord(me.activeRecord)){//更新数据
me.onCancel();
return;
}
me.fireEvent(me.activeRecord.phantom ? 'eventadd' : 'eventupdate', me, me.activeRecord, me.animateTarget);
Ext.Msg.alert("成功");
}
});

me.activeRecord.commit();

// Clear phantom and modified states.
},
//编辑和删除时亦如此