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