?
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 ?欢迎一起学习学习
?
?