5.0.4 Scheduler: only one zone per resource?

Discuss issues related to v5.x
User avatar
dimehb
Premium Member
Premium Member
Posts: 255
Joined: Fri Oct 02, 2015 11:06 am

5.0.4 Scheduler: only one zone per resource?

Post by dimehb » Wed Nov 07, 2018 10:55 am

Using the configuration demo (see attached), I assigned an event store to the resourceZones config object and used a custom template in the resourceZonesConfig so the zone color is individual to the event. This is what it looks like:
2018-11-07 09_53_36-Window.png
2018-11-07 09_53_36-Window.png (30.16 KiB) Viewed 1624 times
Looking at the data, there is a zone missing for "Mike" (and also Don):

Code: Select all

{
          Id: 1,
          ResourceId: 1,
          Name: "Not at work",
          StartDate: new Date(2017, 0, 2),
          EndDate: new Date(2017, 0, 5),
          Category: {
            Color: "#D3FFCE"
          }
        },
        {
          Id: 2,
          ResourceId: 1,
          Name: "Not available",
          StartDate: new Date(2017, 0, 6),
          EndDate: new Date(2017, 0, 8),

          Category: {
            Color: "#BE3782"
          }
        }
The first zone is rendered but the second one isn't.

But it seems that there can only be one resource zone per resource. That doesn't sound right, does it?
Am I missing information? The docs don't seem to mention any anomalies.

Upon further investigation, I noticed it may be due to the resourceZonesConfig. By temporarily removing the template (see below) the second zone is being rendered:

Code: Select all

resourceZonesConfig: {
    // innerTpl: new Ext.XTemplate("<div style='height:100%;background-color:{[this.getColor(values)]}' />", {
    //   /**
    //    * Gets the color from the object's category
    //    * @function
    //    * @param {object} values - the data as a plain JS object
    //    * @return {string} the subject of the appointment
    //    */
    //   getColor: function(values) {
    //     console.log(values);
    //     return ((values || {}).Category || {}).Color || "transparent";
    //   }
    // })
  },
Attachments
resourcezones.rar
(13.78 KiB) Downloaded 36 times

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: 5.0.4 Scheduler: only one zone per resource?

Post by mats » Wed Nov 07, 2018 11:36 am

Your demo doesn't render well for me. Please see this demo for how to use resource zones: https://bryntum.com/examples/scheduler- ... ourcezones
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
dimehb
Premium Member
Premium Member
Posts: 255
Joined: Fri Oct 02, 2015 11:06 am

Re: 5.0.4 Scheduler: only one zone per resource?

Post by dimehb » Wed Nov 07, 2018 11:48 am

I found a way to achieve the same thing but it's ugly.

Code: Select all

resourceZonesConfig: {
    init: function(scheduler) {
        this.store = Ext.StoreManager.lookup(this.store);
        // unique css class to be able to identify the elements belonging to this instance
        this.uniqueCls = this.uniqueCls || ('sch-timespangroup-' + Ext.id());
        this.scheduler = scheduler;
        scheduler.registerRenderer(this.renderer, this);
        if (typeof this.innerTpl === 'string') {
            this.innerTpl = new Ext.XTemplate(this.innerTpl);
        }
        var innerTpl = this.innerTpl;
        if (!this.template) {
            this.template = new Ext.XTemplate('<tpl for=".">' + '<div id="' + this.uniqueCls + '-{id}" class="' + this.cls + ' ' + this.uniqueCls + ' {Cls}" style="' + (scheduler.rtl ? 'right' : 'left') + ':{start}px;width:{width}px;top:{start}px;height:{width}px;{style};background-color:{[this.renderColor(values)]}">' + ( // Let implementer override the rendering with the innerTpl property, output Name field by default
                innerTpl ? '{[this.renderInner(values)]}' : ('{' + this.store.getModel().prototype.nameField + '}')) + '</div>' + '</tpl>', {
                renderInner: function(values) {
                    return innerTpl.apply(values);
                },
                renderColor: function(values) {
                    return ((values || {}).Category || {}).Color || "transparent";
                }

            });
        }
        this.storeListeners = {
            load: this.fullRefresh,
            datachanged: this.fullRefresh,
            clear: this.fullRefresh,
            // Ext JS
            add: this.fullRefresh,
            remove: this.fullRefresh,
            update: this.onModelUpdate,
            // Sencha Touch
            addrecords: this.fullRefresh,
            removerecords: this.fullRefresh,
            updaterecord: this.onModelUpdate,
            scope: this
        };
        this.store.on(this.storeListeners);
    }
},
Let's zoom in on the part I've changed:

Code: Select all

this.template = new Ext.XTemplate('<tpl for=".">' + '<div id="' + this.uniqueCls + '-{id}" class="' + this.cls + ' ' + this.uniqueCls + ' {Cls}" style="' + (scheduler.rtl ? 'right' : 'left') + ':{start}px;width:{width}px;top:{start}px;height:{width}px;{style};background-color:{[this.renderColor(values)]}">' + ( // Let implementer override the rendering with the innerTpl property, output Name field by default
    innerTpl ? '{[this.renderInner(values)]}' : ('{' + this.store.getModel().prototype.nameField + '}')) + '</div>' + '</tpl>', {
    renderInner: function(values) {
        return innerTpl.apply(values);
    },
    renderColor: function(values) {
        return ((values || {}).Category || {}).Color || "transparent";
    }

});
I basically refactored the code I used to have in the innerTpl to the template of the plugin. There's no easy access to this config object so I had to copy the entire init function. Maybe something to improve upon in the future (if it isn't already done since 5.0.4)?

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: 5.0.4 Scheduler: only one zone per resource?

Post by mats » Fri Nov 09, 2018 1:42 pm

Not quite following what the question is here.
But it seems that there can only be one resource zone per resource
No, there can be any number of resource zones per resource, try this in the resource demo.
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
dimehb
Premium Member
Premium Member
Posts: 255
Joined: Fri Oct 02, 2015 11:06 am

Re: 5.0.4 Scheduler: only one zone per resource?

Post by dimehb » Mon Nov 12, 2018 5:00 pm

Yes that was my conclusion too, result of code in the config (see OP). And then I found an ugly workaround by overriding the init function. And that was my ultimate question or suggestion on how to make this easier or cleaner.

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: 5.0.4 Scheduler: only one zone per resource?

Post by mats » Mon Nov 12, 2018 5:33 pm

Still not following, why would you need an override to have multiple resource zones?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
dimehb
Premium Member
Premium Member
Posts: 255
Joined: Fri Oct 02, 2015 11:06 am

Re: 5.0.4 Scheduler: only one zone per resource?

Post by dimehb » Mon Nov 12, 2018 5:40 pm

As quoted from my original post:
Using the configuration demo (see attached), I assigned an event store to the resourceZones config object and used a custom template in the resourceZonesConfig so the zone color is individual to the event
So the override is needed to render each zone with a different color.

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: 5.0.4 Scheduler: only one zone per resource?

Post by mats » Mon Nov 12, 2018 10:32 pm

Why not just use the 'Cls' field?
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
dimehb
Premium Member
Premium Member
Posts: 255
Joined: Fri Oct 02, 2015 11:06 am

Re: 5.0.4 Scheduler: only one zone per resource?

Post by dimehb » Tue Nov 13, 2018 10:01 am

Would be sufficient if there are only a few static variables known up front. Since everything is dynamic this is not what is needed. Basically what I've done is what I need. Just trying to suggest (not very successful at this point) to improve the usability or the scope of the resources zones plugin.

User avatar
mats
Core Developer
Core Developer
Posts: 15590
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: 5.0.4 Scheduler: only one zone per resource?

Post by mats » Tue Nov 13, 2018 2:31 pm

Ok, makes sense. I've made a few changes in our core classes to allow doing this more easily. Try in the next nightly build:

Code: Select all

/**
     * @method getTemplateData
     *
     * Returns data to apply to the HTML template for rendering a timespan element. You can use this to apply custom styling to each rendered timespan.
     *
     *      resourceZonesConfig : {
     *          getTemplateData : function (zone) {
     *              var data = Sch.plugin.ResourceZones.prototype.getTemplateData.call(this, zone);
     *
     *               if (zone.getResourceId() === 6) {
     *                   data.style = "background:#ddd";
     *               }
     *               return data;
     *           }
     *      }
     *
     * @param {Ext.data.Model} record
     *
     * @return {Object}
     */
Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply