Show cool things you have done with our products


Post by omermx »

Hi, I've looked in the API and searched the Forums and can't seem to find more info on the plugin:

Although it's easy to add new fields to the fieldsPanel config, Buttons seem to be pre-configured - how do I add/remove buttons?

Is it a case of just doing something like?

Ext.apply(Sch.plugins.EventEditor, {
         buttons:  
         ...
Thanks!

Post by mats »

The buttons aren't configurable actually. But the whole EventEditor class is only about 200 lines of JS code, so it'd be very easy for you to use it as a base for an editor of your own. What kind of buttons are you looking for?

Post by omermx »

I'm using the eval version and so have not been able to look at the Editor code. I wanted to add an extra button below the image place holder (see attch). Could I build a more advanced form in the fieldsPanel config?
Attachments
Untitled.png
Untitled.png (6.37 KiB) Viewed 9523 times

Post by mats »

Yes definitely, there are no limits to what you can create in your eventEditor. The image actually isn't a placeholder, it's just a css background. Are you trying to have an input field selecting the user photo?

Post by omermx »

Yes that would be a nice feature - any suggestions around how I could dynamically update the CSS so a users photo is displayed in the background?

Post by mats »

Hmm, would you select a photo from a list or should the user be able to upload their picture? This is all doable but would require a little extra work I think.

Post by omermx »

Probably from a list of pre-loaded images...

Post by mats »

Ok, that should be fairly straight forward. I created a base for you to start your work off
fieldsPanelConfig : {
                        border : false,
                        layout : 'border', 
                        items : [
                            {
                                layout : 'form',
                                region:'center',
                                style:'background:#fff',
                                border : false,
                                labelAlign : 'top',
                                defaults : {
                                    width : 135
                                },
                                items : [
                                    titleField = new Ext.form.TextField({
                                        name : 'Title',
                                        fieldLabel : 'Task'
                                    }),
                                    
                                    locationField = new Ext.form.TextField({
                                        name : 'Location',
                                        fieldLabel : 'Location'
                                    })
                                ]
                            },
                            {
                                border : false,
                                region : 'west',
                                width : 100,
                                layout: 'absolute',
                                buttonAlign : 'center',
                                items : [
                                    {
                                        xtype : 'box',
                                        autoEl: {
                                            tag: 'img',
                                            src: 'images/unknown.gif'
                                        },
                                        x : 30,
                                        y : 10
                                    }
                                ],
                                buttons : [
                                    new Ext.Button({
                                        text : 'Your button',
                                        width: 50
                                    })
                                ]
                            }                            
                        ]
                    }

Post by omermx »

What is the name of the handler for the Cancel button that comes as part of the Editor implementation - e.g. you can specify a save handler, but when you click Cancel it has the same affect as Save right now...I tried to guess and added something called cancelHandler but it doesn't work ;)
 editor = new Sch.plugins.EventEditor({
            height : 200,
            width : 270,
            buttonAlign : 'left',
            saveHandler : onSave,
            saveHandlerScope : this,
	    cancelHandler : onCancel,
	    cancelHandlerScope : this,
           ...
        });
    
   
    function onCancel (formPanel, newStart, newEnd, record)
	{
	   console.log('onCancel called');	
	   eventStore.remove(record);
	   formPanel.collapse();	
	}

Post by mats »

That's not supported. If you'd like to modify the editor, I'd suggest you create a new class that behaves the way you want it. Here is the full source of the editor class, it should be super easy for you to create your own using it as your base :)
Ext.ns('Sch.plugins');

/**
 * @class Sch.plugins.EventEditor
 * @extends Ext.FormPanel
 * A FormPanel used to edit scheduled events
 * @constructor
 * Create a new instance of this plugin
 * @param {Object} config The configuration options
 */
Sch.plugins.EventEditor = Ext.extend(Ext.FormPanel, {
    
    /**
     * @cfg {String} saveText The text to show on the save button
     */
    saveText : 'Save',
    
    /**
     * @cfg {String} cancelText The text to show on the cancel button
     */
    cancelText : 'Cancel',
    
    /**
     * @cfg {String} hoursText The text to show after the hour spinner field
     */
    hoursText : 'hrs',
    
    /**
     * @cfg {Object} hideOnBlur True to hide this panel if a click is detected outside the panel
     */
    hideOnBlur : true,
     
    /**
     * @cfg {Object} timeConfig Config for the TimeField constructor.
     */
    timeConfig : {
         allowBlank:false,
         editable : false,
         forceSelection : true
    },
    
    /**
     * @cfg {String} fieldsPanel Panel representing your data that is associated with a scheduler event
     * 
     * Example:
     *  
     * <pre><code>
        fieldsPanel : {
                        layout : 'form',
                        style:'background:#fff',
                        border : false,
                        cls : 'editorpanel',
                        labelAlign : 'top',
                        defaults : {
                            width : 135
                        },
                        items : [
                            titleField = new Ext.form.TextField({
                                name : 'Title',
                                fieldLabel : 'Task'
                            }),
                            
                            locationField = new Ext.form.TextField({
                                name : 'Location',
                                fieldLabel : 'Location'
                            })
                        ]
                    }
     * </pre></code>
     * 
     */
    fieldsPanel : null,
    
    /**
     * @cfg {String} dateFormat This config parameter is passed to the TimeField constructor.
     */
    dateFormat:'Y-m-d',
    
    /**
     * @cfg {String} timeFormat This config parameter is passed to the TimeField constructor.
     */
    timeFormat:'H:i',
    
    /* 
     * Expands the editor
     * @param {Record} eventRecord The record to show in the editor panel
     */
    show : function(eventRecord) {
        
        this.eventRecord = eventRecord;
        
        // Manually set the duration field value
        var duration = Date.getDurationInHours(eventRecord.get('StartDate'), eventRecord.get('EndDate'));
        this.durationField.setValue(duration);
        
        // Load form panel fields
        this.getForm().loadRecord(eventRecord);
        var eventEl = this.grid.getElementFromEventRecord(eventRecord);
        this.el.anchorTo(eventEl, 'bl', this.getConstrainOffsets(eventEl));
        this.expand();
    },
    
    // TODO implement support for constraining the editor panel to the viewport
    getConstrainOffsets : function(eventEl) {
        return [0, 0];
    },
    
    cls : 'sch-eventeditor',
    layout : 'border',
    border : false,
    
    initComponent : function() {
        
        if (!this.fieldsPanelConfig) throw 'Must define a fieldsPanelConfig property';
        
        if (this.hideOnBlur) {
            // Hide when clicking outside panel
            this.mon(Ext.getBody(), 'click', function(e){
                if (!this.collapsed && !e.within(this.getEl()) && !Ext.fly(e.getTarget()).is('.x-combo-list-item')) {
                  this.collapse(false);
                }
            }, this);
        }
        
        // Collapse after render, otherwise rendering is messed up
        this.on('render', this.collapse, this);
        
        this.fieldsPanelConfig.region = 'center';
        
        Ext.apply(this, {
            buttons : [
                {
                    text : this.saveText,
                    scope : this,
                    handler : function() {
                        if (this.getForm().isValid()) {
                            var start = this.startDateField.getValue(),
                                hours = this.durationField.getValue();
                                
                            if (start && hours) {
                                end = start.add(Date.MINUTE, hours * 60);
                            }
                            this.saveHandler.call(this.saveHandlerScope || this, this, start, end, this.eventRecord);
                        }
                    }
                },
                {
                    text : this.cancelText,
                    scope : this,
                    handler : this.collapse
                }
            ],
            items : [{
                region : 'north',
                layout : 'absolute',
                height :35,
                border : false,
                cls : 'sch-eventeditor-timefields',
                items : [
                    this.startDateField = new Ext.ux.form.DateTime({
                        name : 'StartDate',
                        x:10,
                        y:7,
                        width:160,
                        timeFormat:this.timeFormat,
                        timeWidth : 60,
                        timeConfig: this.timeConfig,
                        dateFormat:this.dateFormat,
                        dateConfig: {
                             allowBlank:false
                        }
                    }),
                    
                    this.durationField = new Ext.ux.form.SpinnerField({
                        x:180,
                        y:7,
                        width:55,
                        allowBlank:false
                    }),
                    
                    new Ext.form.Label({
                        y:7,
                        x:240,
                        xtype : 'label',
                        text : this.hoursText
                    })
                ]
            },
            this.fieldsPanelConfig]
        });
        Sch.plugins.EventEditor.superclass.initComponent.call(this);
    },
    
    init : function(grid) {
        grid.on('eventdblclick', this.onEventDblClick, this);
        grid.on('render', this.onGridRender, this);
        
        grid.on('beforedestroy', function() {
            grid.un('eventdblclick', this.onEventDblClick, this);
        });
        
        this.grid = grid;
    },
    
    onEventDblClick : function(g, evtRecord) {
        this.show(evtRecord);
    },
    
    onGridRender : function() {
        this.render(Ext.getBody());
    }
});


Post Reply