Sch.plugins.EventEditor advanced customisation

[omermx]

Ok, thanks for that - is there a way to restrict the editor popup to the browser? See attch, for rows lower down the page it goes out of the browser window, half of the panel is obscured.

[mats]

It's not built in, it's been requested a couple of times before but I haven't had time to implement it yet. It shouldn't be that hard since all methods required to constrain the panel exists in Ext JS. All you need is just some time

I've added a hook method to enable doing this:

// TODO implement support for constraining the editor panel to the viewport
    getConstrainOffsets : function(eventEl) {
        return [0, 0];
    },

[omermx]

Ok am trying to figure this out, can you help me with some pseudo code?

The function would do the following:

1. Get the current x/y position of the viewport/container
2. return constraint offsets that are not greater than those in 1.?

Any idea what method to use? Only thing I've seen in the Ext JS API that is obvious is the constrain config option on a window.

[mats]

Yes, I would study the code constraining the window. There is also the issue of animating it correctly, right now it only slides in downwards but if the panel has to be constrained the sliding direction should possibly differ too. I hope this helps.

[omermx]

Ok so I've got this far - I can check if the editor is out of the browser window.

    getConstrainOffsets : function(eventEl) {
   
            var offsets = {
                    right:this.el.shadowOffset,
                    left:this.el.shadowOffset,
                    bottom:this.el.shadowOffset
                };
			
            var xy = this.el.getConstrainToXY(this.container, true, offsets);
		
			
			if(xy){
				
				return [xy[0],xy[1]];
            }
			else
			{
			  console.log('out of bounds!');
			}
        
    },

Instead of returning a string saying out of bounds I need to called the correct code to make the editor panel slide up instead of down. Can you point me to where it is? Not obvious looking at the code.

Thanks!

[mats]

Now that will be a little bit tricky as a panel expand always goes downwards. It's probably possible, but you'll have to do some digging in the Ext.Panel class and then override it to be able to have it expand "up". I'm thinking we could skip the animation when a constrain has been done. Thoughts?

[omermx]

Well, had a dig around in Ext.Panel and found:

// private
    onExpand : function(doAnim, animArg){
        if(doAnim){
            this[this.collapseEl].slideIn(this.slideAnchor,            <----------
                    Ext.apply(this.createEffect(animArg||true, this.afterExpand, this),
                        this.expandDefaults));
        }else{
            this[this.collapseEl].show(this.hideMode);
            this.afterExpand(false);
        }
    },

couldn't find implementation of slideIn although you can specify slideAnchor, but don't know what it does.

[mats]

Was just looking there myself, slideIn is defined in the Ext.Fx package. You might want to throw a question in the regular Ext help forum to see if anyone has some guidance on making a panel expand upwards.

https://www.sencha.com/forum/forumdispla ... 0-Ext-Help

[omermx]

Have posted, let's see if anyone can help...

[omermx]

Well someone mentioned using slideAnchor = b, but it only seems to change the direction of the animation rather than the position of the panel. I've tried this, doesn't really work...

    getConstrainOffsets : function(eventEl) {
   
   
            var offsets = {
                    right:this.el.shadowOffset,
                    left:this.el.shadowOffset,
                    bottom:this.el.shadowOffset
                };
				
            
			
            var xy = this.el.getConstrainToXY(Ext.getCmp('schedulePanel').container, true, offsets);
            	
			
			if(xy){
				return [xy[0],xy[1]];
            }
			else
			{
			  this.slideAnchor = 'b';
			}
     
		
		
        
    },