calendar group

[brian.moeskau]

I added a group attribute so that multiple calendars can be in a group

Code: Select all

Ext.override(Extensible.calendar.gadget.CalendarListMenu,{
   initComponent : function(){
        this.addEvents(
            'showcalendar',
            'hidecalendar',
            'radiocalendar',
            'colorchange',
            'radiogroup',
            'calgroupchange'
        );
        this.hideEntireGroup = 'Hide entire group';
        var gc = xtreme.cal.caledit.getGroupCombo(this.id + '-calendar-group-picker');
        gc.on({
           'change': {
              fn: Ext.bind(this.handleCalGroupChange, this),
              id: this.id + '-cal-group',
//              fn: xtreme.cal.caledit.onGroupChange,
              scope: this
           }
        });
        gc.fieldLabel = '';
        Ext.apply(this, {
            items: [{
                text: this.displayOnlyThisCalendarText,
                iconCls: 'extensible-cal-icon-cal-show',
                handler: Ext.bind(this.handleRadioCalendarClick, this)
            },{
               text: 'Hide Group',
                iconCls: 'extensible-cal-icon-cal-show',
                handler: Ext.bind(this.handleGroupClick, this)
            }, '-', {
                xtype: 'extensible.calendarcolorpicker',
                id: this.id + '-calendar-color-picker',
                handler: Ext.bind(this.handleColorSelect, this)
            },'-',gc]
        });
       
        this.addClass('x-calendar-list-menu');
        this.callParent(arguments);
    },
    afterRender: function(){
        this.callParent(arguments);
       
        this.palette = this.down('#' + this.id + '-calendar-color-picker');
        this.group = this.down('#' + this.id + '-calendar-group-picker');
       
        if(this.colorId){
            this.palette.select(this.colorId, true);
        }
        if(this.groupId){
           Ext.defer(this.setGroupCombo,200,this, [this.groupId]);
        }
    },
    setGroupCombo: function(gid){
       this.group.suspendEvents();
        this.group.clearValue();
       this.group.setValue(this.groupId);
        this.group.resumeEvents();
    },
    setCalendar: function(id, cid, gid){
        this.calendarId = id;
        this.colorId = cid;
        this.groupId = gid;
        if(this.rendered){
            this.palette.select(cid, true);
            this.setGroupCombo();
        }
        return this;
    },
    handleGroupClick: function(){
       this.fireEvent('radiogroup', this, this.calendarId);
    },
    handleCalGroupChange: function(){
       this.fireEvent('calgroupChange', this, this.calendarId, arguments[1], arguments[2]);
    }
});
Ext.override(Extensible.calendar.gadget.CalendarListPanel,{
   refresh: function(){
        if(this.skipRefresh){
            return;
        }
        var data = [], i = 0, o = null,
            CM = Extensible.calendar.data.CalendarMappings,
            recs = this.store.getRange(),
            len = recs.length;
           
        for(; i < len; i++){
           var ci = recs[i].data[CM.ColorId.name];
            o = {
                cmpId: this.id + '__' + recs[i].data[CM.CalendarId.name],
                title: recs[i].data[CM.Title.name],
                colorCls: this.getColorCls(ci)
            };
            if(recs[i].data[CM.IsHidden.name] === true){
                o.hiddenCls = 'ext-cal-hidden ext-cal-hidden-' + ci;
            }
            data[data.length] = o;
        }
        this.getListTemplate().overwrite(this.body, data);
        /**
         * Added by MA
         */
        this.expand();
        this.doLayout();
    },
   handleColorChange: function(menu, id, colorId, origColorId){
           var rec = this.store.findRecord(Extensible.calendar.data.CalendarMappings.CalendarId.name, id);
           rec.set(Extensible.calendar.data.CalendarMappings.ColorId.name, colorId);
           this.store.sync();
           rec.commit();
   },
   
   showEventMenu : function(el, xy){
        var id = this.getCalendarId(el.parent('li')),
           m = Extensible.calendar.data.CalendarMappings,
            rec = this.store.findRecord(m.CalendarId.name, id);
            colorId = rec.data[m.ColorId.name];
        var groupId = rec.data[m.Group.name];
       
        if(!this.menu){
            this.menu = Ext.create('Extensible.calendar.gadget.CalendarListMenu');
            this.menu.on('colorchange', this.handleColorChange, this);
            this.menu.on('radiocalendar', this.handleRadioCalendar, this);
            this.menu.on('radiogroup', this.handleRadioGroup, this, rec);
            this.menu.on('calgroupchange', this.handleGroupChange, this, rec);
        }
        this.menu.setCalendar(id, colorId, groupId);
        this.menu.showAt(xy);
    },
 // private
    toggleCalendar: function(id, commit){
        var rec = this.store.findRecord(Extensible.calendar.data.CalendarMappings.CalendarId.name, id);
            CM = Extensible.calendar.data.CalendarMappings,
            isHidden = rec.data[CM.IsHidden.name];
       
        rec.set([CM.IsHidden.name], !isHidden);
        if(!commit && isHidden){
           commit = true;
        }
        if(commit !== false){
//           this.store.sync();
           rec.commit();
           
        }
    },
   
    // private
    showCalendar: function(id, commit){
        var rec = this.store.findRecord(Extensible.calendar.data.CalendarMappings.CalendarId.name, id);
       
        if(rec.data[Extensible.calendar.data.CalendarMappings.IsHidden.name] === true){
            this.toggleCalendar(id, commit);
        }
    },
   
    // private
    hideCalendar: function(id, commit){
        var rec = this.store.findRecord(Extensible.calendar.data.CalendarMappings.CalendarId.name, id);
        if(rec.data[Extensible.calendar.data.CalendarMappings.IsHidden.name] !== true){
            this.toggleCalendar(id, commit);
        }
    },
   
    // private
    radioCalendar: function(id){
        var i = 0, recId,
            calendarId = Extensible.calendar.data.CalendarMappings.CalendarId.name,
            recs = this.store.getRange(),
            len = recs.length;
           
        for(; i < len; i++){
            recId = recs[i].data[calendarId];
            // make a truthy check so that either numeric or string ids can match
            if(recId == id){
                this.showCalendar(recId, true);
            }
            else{
                this.hideCalendar(recId, false);
            }
        }
       
        // store.commitChanges() just loops over each modified record and calls rec.commit(),
        // which in turns fires an update event that would cause a full refresh for each record.
        // To avoid this we simply set a flag and make sure we only refresh once per commit set.
        this.skipRefresh = true;

        delete this.skipRefresh;
        this.refresh();
    },
    radioGroup: function(id){
            var i = 0, recId, gId,
               CM = Extensible.calendar.data.CalendarMappings,
                calendarId = CM.CalendarId.name,
                groupId = CM.Group.name,
                curRec = this.store.findRecord(calendarId, id).data[groupId],
                recs = this.store.getRange(),
                len = recs.length;
               
            for(; i < len; i++){
                recId = recs[i].data[calendarId];
                gId = recs[i].data[groupId];
                // make a truthy check so that either numeric or string ids can match
                //if the cur rec is not hidden then unhide
                if(curRec == gId && recs[i].data[CM.IsHidden.name]){
                    this.showCalendar(recId, false);
                }
                else if(curRec == gId && !recs[i].data[CM.IsHidden.name]){
                    this.hideCalendar(recId, true);
                }
            }
           
            this.skipRefresh = true;

            delete this.skipRefresh;
            this.refresh();
    },
    handleGroupChange: function(menu, id, newValue, oldValue, rec){
       var rec = this.store.findRecord(Extensible.calendar.data.CalendarMappings.CalendarId.name, id);
        rec.set(Extensible.calendar.data.CalendarMappings.Group.name, newValue);
        this.store.sync();
        rec.commit();
        menu.hide();
    },
    handleRadioCalendar: function(menu, id){
        this.radioCalendar(id);
    },
    handleRadioGroup: function(menu, id){
       this.radioGroup(id);
    }
});

[brian.moeskau]

It looks like there's currently a dependency on "xtreme.cal.caledit.getGroupCombo" that I don't see defined anywhere. I'd love to try this out and see how it works!

[marmstrong]

Sorry about that. I will remove the dependencies and repost.

[marmstrong]

Below is a little singleton that goes along with the calendar group

Code: Select all

Ext.define('xtreme.cal.caledit',{
   singleton: true,
   onColorSelect: function(obj, colorId){
       var c = colorId;
       this.frm.getForm().setValues({color: c});
    },
    getGroupCombo: function(id){
       var i = id || Ext.id();
       return Ext.create('Ext.form.ComboBox', {
          fieldLabel: 'Choose Group',
          store: xtreme.data.Store.getGroupStore(),
          queryMode: 'local',
          id: i,
          displayField: 'grouptitle',
          valueField: 'id',
          name: 'group'
      });
    },
    onGroupChange: function(f, newValue, oldValue, eOpts ){
       var v = f;
    },
   getPanel: function(){
      var grp = this.getGroupCombo();
      this.frm =  Ext.create('Ext.form.Panel',{
         xtype: 'panel',
          title: 'Add Calendar Type',
          renderTo: Ext.getBody(),
          bodyPadding: 5,
          width: 350,
          height: 250,
          // Any configuration items here will be automatically passed along to
          // the Ext.form.Basic instance when it gets created.

          // The form will submit an AJAX request to this URL when submitted
          url: '/maindata/CalendarManage/addCalendar',
          root: 'data',
          defaultType: 'textfield',
          items: [{
              fieldLabel: 'Title',
              name: 'title',
              allowBlank: false
          },grp,{
              fieldLabel: 'Description',
              name: 'desc',
              allowBlank: true
          },{
             fieldLabel: 'Select a color',
                xtype: 'extensible.calendarcolorpicker',
                id: 'new-calendar-color-picker',
                handler: Ext.bind(this.onColorSelect, this)
            },{
               xtype: 'hiddenfield',
               name: 'color',
               value: 1
            }],
           
          buttons: [{
              text: 'Submit',
              scope: this,
              handler: function() {
                  // The getForm() method returns the Ext.form.Basic instance:
                  var form = this.frm.getForm();
                  if (form) {
                      // Submit the Ajax request and handle the response
                      form.submit({
                          success: function(form, action) {
                             xtreme.data.Store.getCalendarStore().load();
                             Ext.Msg.alert('Success', action.result.msg);
                          },
                          failure: function(form, action) {
                              Ext.Msg.alert('Failed', action.result.msg);
                          }
                      });
                  }
              }
          }]
      });
      return this.frm;
   },
   getGroupPanel: function(){
      var grp = this.getGroupCombo();
      this.frm =  Ext.create('Ext.form.Panel',{
         xtype: 'panel',
          title: 'Add Calendar Type',
          renderTo: Ext.getBody(),
          bodyPadding: 5,
          width: 350,
          height: 200,
          // Any configuration items here will be automatically passed along to
          // the Ext.form.Basic instance when it gets created.

          // The form will submit an AJAX request to this URL when submitted
          url: '/maindata/CalGroupManage/addGroup',
          root: 'data',
          defaultType: 'textfield',
          items: [{
              fieldLabel: 'Group Title',
              name: 'title',
              allowBlank: false
          }],
           
          buttons: [{
              text: 'Submit',
              scope: this,
              handler: function() {
                  // The getForm() method returns the Ext.form.Basic instance:
                  var form = this.frm.getForm();
                  if (form) {
                      // Submit the Ajax request and handle the response
                      form.submit({
                         url: '/maindata/CalGroupManage/addGroup',
                          success: function(form, action) {
                             xtreme.data.Store.getGroupStore().load();
                             Ext.Msg.alert('Success', action.result.msg);
                          },
                          failure: function(form, action) {
                              Ext.Msg.alert('Failed', action.result.msg);
                          }
                      });
                  }
              }
          }]
      });
      return this.frm;
   },
   showGroup: function(){
      if(!this.groupwin){
         this.groupwin = Ext.create('Ext.window.Window', {
             title: '',
             closeAction: 'hide',
             width: 400,
             layout: 'fit',
             items: this.getGroupPanel()
         });
      }
      this.groupwin.show();
   },
   show: function(){
      if(!this.win){
         this.win = Ext.create('Ext.window.Window', {
             title: '',
             closeAction: 'hide',
             width: 400,
             layout: 'fit',
             items: this.getPanel()
         });
      }
      this.win.show();
   }
});

The calendar group store is below. You will need to throw in some test data or convert it to a memory store to test it.

Code: Select all

getGroupStore: function(){
      if(!this.groupStore){
         Ext.define('CalGroup',{
            extend: 'Ext.data.Model',
            fields: [{name: 'grouptitle', type: 'string'},{name:'id', type:'int'}]
         });
         this.groupStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            model: 'CalGroup',
            proxy: {type: 'ajax', url: '/maindata/CalGroupManage/getGroups',
               reader:{
                  type: 'json', root: 'data', idProperty: 'id'
               },
               writer: {
                  type: 'json'
               }
                  
            }
         });
      }
      return this.groupStore;
   },