UDN-企业互联网技术人气社区

板块导航

浏览  : 1080
回复  : 3

[ExtJs] Ext JS 3.3 日历组件

[复制链接]
山外青山的头像 楼主
发表于 2015-8-6 16:34:50 | 显示全部楼层 |阅读模式
本帖最后由 山外青山 于 2015-8-6 16:37 编辑

    在Ext中设计一个标准的日历组件并不是一件简单的事情.既不能把它设计复 杂到用起来比较困难,又不能设计得简单到只能拿来当例子,脱离了实际的用途. 我们在这两者这间作了平衡,希望你们同意.

    开始了解日历面板
    主要组成部分:
*月视图这个视图渲染使用了MonthViewTemplate.它会自动适应屏幕尺寸,不 会出现滚动条.它基于box布局.
*日视图这个视图使用了两个组件:DayHeaderView(由DayHeaderTemplate渲 染)和DayBodyView(由DayBodyTemplate渲染)DayHeaderView里面是全日事件, 而DayBodyView则是除了非全日活动外的所有活动.
*周视图这个视图仅仅是扩展了日视图,重复了7天.所以它并不需要一个单独 的模板.
0A003I18-0.png




日历控件配置
  1. monthViewCfg: {
  2.     showHeader: true,
  3.     showWeekLinks: true,
  4.    showWeekNumbers: true
  5. }
复制代码


处理事件数据
  1. Ext.calendar.EventMappings.Title.mapping = 'my-title'; // remap to a custom id
  2. Ext.calendar.EventMappings.EndDate.name = 'END';       // remap the field name
  3. Ext.calendar.EventRecord.reconfigure();
复制代码
绑定所有
  1. // Set up the data stores used by the calendar
  2. this.calendarStore = new Ext.data.JsonStore({
  3.     // config options
  4. });
  5. this.eventStore = new Ext.data.JsonStore({
  6.     // config options
  7. });

  8. // Set up the UI
  9. new Ext.Viewport({
  10.     layout: 'border',
  11.     items: [{
  12.         id: 'app-header',
  13.         region: 'north',
  14.         // etc. -- static header area
  15.     },{
  16.         id: 'app-center',
  17.         region: 'center',
  18.         layout: 'border',
  19.         items: [{
  20.             id:'app-west',
  21.             region: 'west',
  22.             // etc. -- sidebar region configs
  23.         },{
  24.             // This is the start of the calendar
  25.             xtype: 'calendaRPAnel',
  26.             region: 'center',

  27.             // Tie the data stores to the calendar
  28.             eventStore: this.eventStore,
  29.             calendarStore: this.calendarStore,

  30.             // Configure views as needed
  31.             monthViewCfg: {
  32.                 showWeekLinks: true
  33.             },

  34.             // CalendarPanel-specific configs as needed
  35.             showTime: false

  36.             // Set up event listeners -- see the sample app code for the full list
  37.             listeners: {
  38.                 'eventclick': {
  39.                     fn: function(vw, rec, el) {
  40.                         // etc.
  41.                     },
  42.                     scope: this
  43.                 },
  44.                 'eventadd': {
  45.                     fn: function(cp, rec){
  46.                         // etc.
  47.                     },
  48.                     scope: this
  49.                 },
  50.                 // etc. -- there are a lot of these
  51.                 // These handlers allow the app code to coordinate between
  52.                 // components and the overall UI so that the components
  53.                 // don't have to know about each other.
  54.             }
  55.         }]
  56.     }]
  57. });
复制代码

   但对于...
正如前面提到,真正的日历程序还需要完成很多额外的功能.举个例子,如定期 提醒,邀请与会者功能等等.如果您需要一个完整的日历程序,可以留意我们的日 历专业版.
英文原文:
http://www.sencha.com/blog/2010/09/08/ext-js-3-3-calendar- component/
发表于 2015-8-12 14:05:27 | 显示全部楼层
其实js如果遇到web安全类的项目,那就又要做牺牲了,无法读写文件,访问受限。。。哎。。。
使用道具 举报

回复

发表于 2015-8-14 13:33:02 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2015-8-30 12:30:58 | 显示全部楼层
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部