?
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/add
