Ext JS 3.3 日历组件

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

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

日历控件配置

monthViewCfg: {
    showHeader: true,
    showWeekLinks: true,
    showWeekNumbers: true
}

处理事件数据

Ext.calendar.EventMappings.Title.mapping = 'my-title'; // remap to a custom id
Ext.calendar.EventMappings.EndDate.name = 'END';       // remap the field name
Ext.calendar.EventRecord.reconfigure();

绑定所有

// Set up the data stores used by the calendar
this.calendarStore = new Ext.data.JsonStore({
    // config options
});
this.eventStore = new Ext.data.JsonStore({
    // config options
});
 
// Set up the UI
new Ext.Viewport({
    layout: 'border',
    items: [{
        id: 'app-header',
        region: 'north',
        // etc. -- static header area
    },{
        id: 'app-center',
        region: 'center',
        layout: 'border',
        items: [{
            id:'app-west',
            region: 'west',
            // etc. -- sidebar region configs
        },{
            // This is the start of the calendar
            xtype: 'calendarpanel',
            region: 'center',
 
            // Tie the data stores to the calendar
            eventStore: this.eventStore,
            calendarStore: this.calendarStore,
 
            // Configure views as needed
            monthViewCfg: {
                showWeekLinks: true
            },
 
            // CalendarPanel-specific configs as needed
            showTime: false
 
            // Set up event listeners -- see the sample app code for the full list
            listeners: {
                'eventclick': {
                    fn: function(vw, rec, el){
                        // etc.
                    },
                    scope: this
                },
                'eventadd': {
                    fn: function(cp, rec){
                        // etc.
                    },
                    scope: this
                },
                // etc. -- there are a lot of these
                // These handlers allow the app code to coordinate between
                // components and the overall UI so that the components 
                // don't have to know about each other.
            }
        }]
    }]
});

但对于...
正如前面提到,真正的日历程序还需要完成很多额外的功能.举个例子,如定期提醒,邀请与会者功能等等.如果您需要一个完整的日历程序,可以留意我们的日历专业版.

英文原文:
http://www.sencha.com/blog/2010/09/08/ext-js-3-3-calendar-component/