Question

如何访问我的活动中的日历数据，我的意思是不在模板中，而是在哪里。我们的想法是，根据源自日历存储的“已确认”值更改模板。

这是我的代码，但到目前为止还没有运气！

Ext.override(Extensible.calendar.view.DayBody, {
    getEventBodyMarkup: function() {
        if(!this.eventBodyMarkup) {

            // can't seem to get this section to work properly
            if (this.data.Confirmed === 1) // I need to access the event store in here...
                 var statusText='Ok';
            else 
                 var statusText='Ko';

            this.eventBodyMarkup = ['<p class="ellipsis">{Title}</br><strong>{ServiceName}</strong></br>'+statusText+'{Notes}</p>',
                '<tpl if="_isReminder">',
                    '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',
                '</tpl>',
                '<tpl if="_isRecurring">',
                    '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',
                '</tpl>'
            ].join('');
        }
        return this.eventBodyMarkup;
    },
  }
);

有人可以帮助我吗？

提前致谢！

Answer 1

这篇文章很老了，但我最近遇到了这个问题而且函数getEventBodyMarkup只提供了单独的模板标记，并且没有为每个事件调用。我不熟悉可扩展日历应用程序，但我的解决方案是覆盖函数getTemplateEventData这里是你的示例的快速解决方案，但请注意我在ExtJs 3.4上运行v1.0-rc1但该过程可以很容易地适应ExtJs 4 +

Ext.apply(Ext.ensible.cal.DayBodyView.prototype,{
  getEventBodyMarkup: function() {
    if(!this.eventBodyMarkup) {
      //just add a template variable/placeholder to your variable
      // in this case i choose _statusText
      this.eventBodyMarkup = ['<p class="ellipsis">{Title}</br>',
        '<strong>{ServiceName}</strong></br>{_statusText}{Notes}</p>',
          '<tpl if="_isReminder">',
            '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',
          '</tpl>',
          '<tpl if="_isRecurring">',
             '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',
          '</tpl>'
      ].join('');
    }
    return this.eventBodyMarkup;
  }

  // now override the template data provider
  getTemplateEventData : function(evt){
    // --- 
    // essential code from the overwritten function
    // ---
    var M = Extensible.cal.EventMappings,
      extraClasses = [this.getEventSelectorCls(evt[M.EventId.name])],
      colorCls = 'x-cal-default';

    this.getTemplateEventBox(evt);

    if(this.calendarStore && evt[M.CalendarId.name]){
      var rec = this.calendarStore.getById(evt[M.CalendarId.name]);
      colorCls = 'x-cal-' + rec.data[Ext.ensible.cal.CalendarMappings.ColorId.name];
    }
    colorCls += (evt._renderAsAllDay ? '-ad' : '') + (Ext.isIE || Ext.isOpera ? '-x' : '');
    extraClasses.push(colorCls);

    if(this.getEventClass){
      var rec = this.getEventRecord(evt[M.EventId.name]),
      cls = this.getEventClass(rec, !!evt._renderAsAllDay, data, this.store);      
      extraClasses.push(cls);
    }

    // ---
    // Custom code starts here
    // ---
    var data = {}; // is going to store all your custom template vars

    if(this.getEventRecord(evt[M.EventId.name]).data.Confirmed===1) {
      data._statusText="OK";
    } else {
      data._statusText="Ko";
    }

    return Ext.applyIf(data, evt);
  }
});

希望你能得到这个想法，这可能不是最好的实践，但它解决了你的问题或其他人来解决这个问题。确保你不要覆盖数据存储中的任何保留变量，我使用Ext.applyIf（...）来防止此类事故。

Answer 2

在模板中使用if条件：

this.eventBodyMarkup = ['<p class="ellipsis">{Title}</br><strong>{ServiceName}</strong></br>'
            '<tpl if="Confirmed==1">OK<tpl else>KO</tpl>{Notes}</tpl></p>',
            '<tpl if="_isReminder">',
                '<i class="ext-cal-ic ext-cal-ic-rem">&#160;</i>',
            '</tpl>',
            '<tpl if="_isRecurring">',
                '<i class="ext-cal-ic ext-cal-ic-rcr">&#160;</i>',
            '</tpl>'
        ].join('');

可扩展日历v1.5.2和ExtJS v4.2中的标记内的日历数据

2 个答案: