Extjs 万年历
Extjs 万年历 extensible控件使用
看了Extjs的万年历，觉得不错，想移植到自己的项目中。看了API中的源码，怎么移植都有些错误。
谷歌一下，发现extensible这款插件还不错，官网：http://ext.ensible.com 不过有license限制。
我下载的是extensible-1.5.2 for extjs4.x (选择自己对应的Extjs版本)。
压缩后源码及API都有，可以学习学习。
1. 在jsp中引入相关js
<link rel="stylesheet" href="${basePath }/ext/resources/css/ext-all-gray.css" />
<link rel="stylesheet" href="${basePath }/css/tipMessage.css" />
<link rel="stylesheet" href="${basePath }/addOns/calendar/resources/css/extensible-all.css" />
<script type="text/javascript" src="${basePath }/ext/ext-all-rtl.js"></script>
<script type="text/javascript" src="${basePath }/ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="${basePath }/addOns/calendar/lib/extensible-all-debug.js"></script>
<script type="text/javascript" src="${basePath }/addOns/calendar/pkgs/calendar-debug.js"></script>
<script type="text/javascript" src="${basePath }/addOns/calendar/extensible-lang-zh_CN.js"></script>
<script type="text/javascript" src="${basePath }/js/util/printobj.js"></script>
<script type="text/javascript" src="${basePath }/js/tipMessage.js"></script
这里我贴的我项目的路径，
<script type="text/javascript" src="${basePath }/addOns/calendar/lib/extensible-all-debug.js"></script>
<script type="text/javascript" src="${basePath }/addOns/calendar/pkgs/calendar-debug.js"></script>
<script type="text/javascript" src="${basePath }/addOns/calendar/extensible-lang-zh_CN.js"></script>
这3个是extensible的。
2. 渲染calendar
var eventStore = Ext.create('Extensible.calendar.data.EventStore', {
autoLoad: true,
autoSync: false,
proxy: {
type: 'rest',
url: basePath + '/calendar/init.do',
noCache: false,
reader: {
type: 'json',
root: 'calendars'
},
writer: {
type: 'json',
nameProperty: 'calendars'
}
}
});
Ext.onReady(function () {
// 去除源码中store同步，改为手动AJAX添加
Extensible.calendar.view.AbstractCalendar.override({
save: function () {
//if(!this.store.autoSync){
// this.store.sync();
//}
// 关闭窗口
if(Ext.getCmp('ext-cal-editwin')) {
Ext.getCmp('ext-cal-editwin').hide();
}
}
});
Ext.create('Extensible.calendar.CalendarPanel', {
renderTo: Ext.getBody(),
id: 'calendar',
width: '100%',
height: '100%',
eventStore: eventStore,
editModal: true,
listeners: {
'eventadd': function (the, record) {
//alert('INSERT');
save(record, '/calendar/addCal.do', '保存');
},
'eventdelete': function (the, record, el) {
//alert('DELETE');
save(record, '/calendar/delCal.do', '删除');
},
'eventupdate': function (the, record) {
//alert('UPDATE')
save(record, '/calendar/editCal.do', '保存');
}
}
});
//Ext.create('Extensible.calendar.form.EventWindow').show();
});
/**
* 封装record中数据
*/
function conParam(data) {
return {
'calForm.title': data.Title,
'calForm.start': data.StartDate,
'calForm.end': data.EndDate,
'calForm.location': data.Location,
'calForm.notes': data.Notes,
'calForm.isAllDay': data.IsAllDay,
'calForm.url': data.Url,
'calForm.reminder': data.Reminder,
'calForm.id': data.EventId
};
}
/**
*
*
*/
function save(record, url, msg) {
var params = conParam(record.data);
Ext.Ajax.request({
method: 'POST',
url: basePath + url,
params: params,
success: function (response) {
var json = Ext.JSON.decode(response.responseText);
var bol = json.result;
if(bol == true) {
Ext.tipMessage.msg('系统提示', msg + '成功！');
} else {
Ext.tipMessage.msg('系统提示', msg + '失败！');
}
},
failure: function () {
Ext.tipMessage.msg('系统提示', '系统异常');
}
});
}
贴得代码有点乱，待会儿传源代码。
核心的两个类Extensible.calendar.CalendarPanel 和 Extensible.calendar.data.EventStore
这样基本能显示了，源码中相关json看压缩包src/calendar/data/EventMappings.js 这个js有所需json数据信息。
你也可以去修改json中的相关字段，代码如下：
Extensible.calendar.data.EventMappings = {
EventId: {name: 'ID', mapping:'evt_id', type:'int'},
CalendarId: {name: 'CalID', mapping: 'cal_id', type: 'int'},
Title: {name: 'EvtTitle', mapping: 'evt_title'},
StartDate: {name: 'StartDt', mapping: 'start_dt', type: 'date', dateFormat: 'c'},
EndDate: {name: 'EndDt', mapping: 'end_dt', type: 'date', dateFormat: 'c'},
RRule: {name: 'RecurRule', mapping: 'recur_rule'},
Location: {name: 'Location', mapping: 'location'},
Notes: {name: 'Desc', mapping: 'full_desc'},
Url: {name: 'LinkUrl', mapping: 'link_url'},
IsAllDay: {name: 'AllDay', mapping: 'all_day', type: 'boolean'},
Reminder: {name: 'Reminder', mapping: 'reminder'}
};
Extensible.calendar.EventRecord.reconfigure(); // 这个一定要写
我试了一下，控制台报：没reconfigure()这个方法。也没高兴再试，就用默认的了。
关于保存， 总是报404错误，看了源码后我将父类AbstractCalendar的save方法重写了下。
QQ：78264486 欢迎一起学习学习