`
sxu
  • 浏览: 37910 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

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

 

 

  • 大小: 394.9 KB
0
0
分享到:
评论

相关推荐

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    包含各种类型的extjs小图标,Extjs4小图标

    ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    ExtJS 是一个强大的JavaScript前端框架,用于构建富客户端应用程序。版本4.1是该框架的一个重要里程碑,提供了许多新功能和改进。对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs...

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...

    ExtJS 界面设计器

    ExtJS是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序。其界面设计器,正如标题所示,是一种可视化的开发工具,能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...

    ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法!

    extjsapi/extjs3.4

    extjsapi,extjs文档,api手岫

    extjs 3.4 开发前准备

    【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    JBPM4 SSH EXTJS JBPM SSH EXTJS

    JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS 希望对大家有帮助。

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

Global site tag (gtag.js) - Google Analytics