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 欢迎一起学习学习
相关推荐
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“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是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...
ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...
ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...
ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...
ExtJS 是一个强大的JavaScript前端框架,用于构建富客户端应用程序。版本4.1是该框架的一个重要里程碑,提供了许多新功能和改进。对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs...
ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...
EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...
ExtJS是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序。其界面设计器,正如标题所示,是一种可视化的开发工具,能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...
适用于ExtJS4、ExtJS5 MD5加密算法!
extjsapi,extjs文档,api手岫
【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...
一个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 希望对大家有帮助。
适合ExtJs开发人员extjs技术上手以及深入
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议