Show cool things you have done with our products


Post by praveen.shastri »

Hello Mats,

I am facing tow challenges with scheduler event editor example.

1.When creating a event(using drag event) for the first time the task form opens. But when I try to modify the existing event by dragging across the timeline it wont show the task form. How do i enable the form even on editing the event?

2. When I add first event the form fields are blank. But when I try to add second event it populates the values of first event by default. How do I avoid it?
Last edited by praveen.shastri on Sun Nov 07, 2010 7:44 am, edited 1 time in total.

Post by mats »

Ah, you want the editor to automatically popup after an event has been moved? Just listen to the 'drop' event and show the editor:

1.
initGridEvents : function() {
        var g = this.grid;
        
        g.on('eventcontextmenu', this.onEventContextMenu, this);
        g.on('beforetooltipshow', this.beforeTooltipShow, this);
        g.on('drop', function(g, rs) {
            this.editor.show(rs[0]);
        }, this);
    },
2. That I cannot reproduce, can you post your complete code and I'll have a look

Post by praveen.shastri »

Mats, Thanks a ton for quick reply. I am a newbie to ext-scheduler and ext-js. Started working on this from last week itself. So please forgive me if I ask many questions.

To reproduce second issue,

I have modified the editor form. I have added couple of more fields I dont know if the issue is because of that. The code pasted below also does a round trip to MS SQL database using struts technology.

Below is my code,
Ext.ns('App');

var resourceStore;
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    if (typeof console === 'undefined') {
        console = {
            log : Ext.log,
            error : Ext.log
        };
    }
    
    App.Scheduler.init();
});

var eventStore;
App.Scheduler = {
    
    // Bootstrap function
    init : function() {
        
        this.grid = this.createGrid();
        
        this.initGridEvents();
        this.initStoreEvents();
           
        this.grid.render(Ext.getBody());
    },
    
    onEventContextMenu : function(g, rec, e) {
        e.stopEvent();
        
        if (!g.gCtx) {
            g.gCtx = new Ext.menu.Menu({
                items : [
                    {
                        id : 'context-delete',
                        text : 'Delete event',
                        iconCls : 'icon-delete'
                    }
                ]
            });
            
            g.gCtx.on('itemclick', function(item, e) {
            	alert("g.gCtx.rec id ---"+g.gCtx.rec.get("Id"));
                switch (item.id) {
                    case 'context-delete':
                    	Ext.Ajax.request
                    	({	
                    	url:"deleteSchedule.do",
                    	params:
                    	{
                    		id:g.gCtx.rec.get("Id")
                    	},
                    	success: function(objServerResponse)
                    	{
                    	}
                    	});	
                    	g.eventStore.remove(g.gCtx.rec);

                    break;
                    
                    default:
                        throw item.id + ' is not a valid menu action';
                    break;
                }
            }, this);
        }
        g.gCtx.rec = rec;
        g.gCtx.showAt(e.getXY());
    },
    
    // Don't show tooltip if editor is visible
    beforeTooltipShow : function(g, r) {
        return this.editor.collapsed;
    },
        
    initStoreEvents : function() {
        var g = this.grid;
        
        g.eventStore.on('update', function (store, bookingRecord, operation) {
            if (operation !== Ext.data.Record.EDIT) return;
            
            // Simulate server delay 1.5 seconds
            bookingRecord.commit.defer(1500, bookingRecord);
        });
    },
    
    initGridEvents : function() {
        var g = this.grid;
        
        g.on('eventcontextmenu', this.onEventContextMenu, this);
        g.on('beforetooltipshow', this.beforeTooltipShow, this);
        g.on('drop', function(g, rs) {
            this.editor.show(rs[0]);
        }, this);
    },
   
    renderer : function (item, resourceRec, row, col, ds) {
        var bookingStart = item.get('StartDate');
        
        return {
            headerText : bookingStart.format("G:i"),
            footerText : item.get('Title') || ' '
        };
    },
    
    createGrid : function() {
            
        // Store holding all the resources
        resourceStore = new Ext.data.JsonStore({
        	root : 'row',
            sortInfo:{field: 'Id', direction: "ASC"},
            idProperty : 'Id',
            totalProperty : 'total',
            proxy : new Ext.data.HttpProxy({
            	url : "LoadResourceData.do"
            }),
            fields : [
                'Id', 
                'Name',
                'Emp Id',
                'Email',
                'Designation',
                'Sector',
                'Skills',
                'Education',
                'Experience',
                'Gender'
            ]
        });
       
        resourceStore.load(
        {
        	params :
			{
				searchAll : "yes"
			}
        }
        );
        
        //paging for resource store
        var _resourcePagingBar = new Ext.PagingToolbar(
		{
			pageSize : 10,
			border :false,
			id: '_resourceStorePagingBar',
			store : resourceStore,
			displayInfo : true,
			displayMsg : 'Displaying Employee {0} - {1} of {2}',
			emptyMsg : "Records not found"
		});
        
        // Store holding all the events
        	eventStore = new Ext.data.JsonStore({
            sortInfo:{field: 'ResourceId', direction: "ASC"},
            idProperty : 'Id',
            proxy : new Ext.data.HttpProxy({
            	url : "LoadScheduleData.do"
            }),

            fields : [
                {name: 'Id', type:'string'},
                {name: 'ResourceId'},
                {name: 'Title'},
                {name: 'StartDate', type : 'date', dateFormat : 'Y-m-d'},
                {name: 'EndDate', type : 'date', dateFormat : 'Y-m-d'},
                'Location',
                'Engagemnet',
                'Description'
            ]            
        });
        eventStore.load();
        var start = new Date(2010, 4, 22, 6);
        
                
        var g = new Sch.EditorSchedulerPanel({
            width : 1000,
            height:400,
            clicksToEdit : 1,
            columns : [
                {header : 'Name', sortable:true, width:130, dataIndex : 'Name'},
                {header : 'Emp Id', sortable:true, width:50, dataIndex : 'Emp Id'},
                {header : 'Email', sortable:true,hidden:true,width:130, dataIndex : 'Email'},
                {header : 'Designation', sortable:true, width:130, dataIndex : 'Designation'},
                {header : 'Sector', sortable:true, width:130, dataIndex : 'Sector'},
                {header : 'Skills', sortable:true,hidden:true, width:130, dataIndex : 'Skills'},
                {header : 'Education', sortable:true,hidden:true, width:130, dataIndex : 'Education'},
                {header : 'Exp', sortable:true, width:30, dataIndex : 'Experience'},
                {header : 'Gender', sortable:true,hidden:true, width:130, dataIndex : 'Gender'}
            ],
            
             // Setup view configuration
            viewModel : {
                start : start,
                end : start.add(Date.HOUR, 12),
                columnType : 'hourAndDay',
                viewBehaviour : Sch.ViewBehaviour.HourView,
                renderer : this.renderer
            },     
            
            // Specialized template with header and footer
            eventTemplate : new Ext.Template(
                '<div id="{id}" style="width:{width}px;left:{leftOffset}px" class="sch-event {cls}">' +
                    '<div class="sch-event-inner">' + 
                       '<span class="sch-event-header">{headerText}</span>' + 
                       '<div class="sch-event-footer">{footerText}</div>' + 
                   '</div>' + 
                    String.format(Sch.SchedulerPanel.prototype.resizeHandleHtml, 'east'),
                '</div>').compile(),
                    
            viewConfig: {
                forceFit:true
            },
            
            store : resourceStore,
            eventStore : eventStore,
            border : true,
            tbar : [
            
            	_resourcePagingBar,
            	' ',
            	{
            		text: 'Search',
            		handler: onSearch,
            		scope : this
            	},
            	'-',
            	'->',
                {
                    iconCls : 'icon-prev',
                    scale : 'medium',
                    handler : function() {
                        var start = g.getStart(), end=g.getEnd();
                        
                        if (Ext.getCmp('span3').pressed) {
                            start = start.add(Date.WEEK, -6);
                            end = end.add(Date.WEEK, -6);
                        } else {
                            var days = Math.max(Date.getDurationInDays(start, end), 1);
                            start = start.add(Date.DAY, -days);
                            end = end.add(Date.DAY, -days);
                        }
                        g.setView(start, end);
                    }
                },
                {
                    id : 'span1',
                    pressed: true,
                    text: '1 Day',
                    enableToggle : true,
                    toggleGroup: 'span',
                    inputValue: 'red',
                    handler : function() {
                        var start = g.getStart();
                        start.clearTime();
                        start.setHours(6);
                        g.setView(start, start.add(Date.HOUR, 12), 'hourAndDay', Sch.ViewBehaviour.HourView, this.renderer);
                    }
                },
                {
                    id : 'span2',
                    enableToggle : true,
                    text: '1 week',
                    toggleGroup: 'span',
                    handler : function() {
                        g.setView(g.getStart(), g.getStart().add(Date.DAY, 7), 'dayAndWeeks', Sch.ViewBehaviour.DayView, this.renderer);
                    }
                },
                '            ',
                {
                    id : 'span3',
                    enableToggle : true,
                    text: '6 weeks',
                    toggleGroup: 'span',
                    handler : function() {
                        g.setView(g.getStart(), g.getStart().add(Date.DAY, 42), 'weekAndMonths', Sch.ViewBehaviour.MonthView, this.renderer);
                    }
                },
                {
                	xtype: 'tbspacer',
                	width:100
                }	
                ,
                {
                    iconCls : 'icon-cleardatabase',
                    tooltip: 'Clear database',
                    scale : 'medium',
                    handler : function() {
                        g.eventStore.removeAll();
                    }
                },
                {
                    iconCls : 'icon-next',
                    scale : 'medium',
                    handler : function() {
                        var start = g.getStart(), end=g.getEnd();
                        
                        if (Ext.getCmp('span3').pressed) {
                            start = start.add(Date.WEEK, 6);
                            end = end.add(Date.WEEK, 6);
                        } else {
                            var days = Math.max(Date.getDurationInDays(start, end), 1);
                            start = start.add(Date.DAY, days);
                            end = end.add(Date.DAY, days);
                        }
                            
                        g.setView(start,end);
                    }
                }
            ],
            
            tooltipTpl : new Ext.XTemplate(
                '<dl class="eventTip">', 
                    '<dt class="icon-clock">Time</dt><dd>{[values.StartDate.format("Y-m-d")]}</dd>',
                    '<dt class="icon-task">Task</dt><dd>{Title}</dd>',
                    '<dt class="icon-earth">Location</dt><dd>{Location}&nbsp;</dd>',
                '</dl>').compile(),
            
            plugins : [
                this.editor = new Sch.plugins.EventEditor({
                    height : 260,
                    width : 350,
                    buttonAlign : 'left',
                    saveHandler : this.onSave,
                    saveHandlerScope : this,                  
                    fieldsPanelConfig : {
                        layout : 'form',
                        style:'background:#fff',
                        border : false,
                        cls : 'editorpanel',
                        labelAlign : 'left',
                        defaults : {
                            width : 135
                        },
                        items : [
                            titleField = new Ext.form.TextField({
                                name : 'Title',
                                id:'title',
                                fieldLabel : 'Task',
                                allowBlank:false
                            }),
                            engagemnetField = new Ext.form.TextField({
                                name : 'Engagemnet',
                                fieldLabel : 'Engagemnet',
                                allowBlank:false
                            }),

                            descriptionField = new Ext.form.TextArea({
                                name : 'Description',
                                fieldLabel : 'Description'
                            }),

                            locationField = new Ext.form.TextField({
                                name : 'Location',
                                fieldLabel : 'Location'
                            })
                        ]
                    },
                    listeners : {
                        expand : function() {
                            titleField.focus(true);
                        }
                    }
                })
            ],
            listeners : {
                dragcreateend : {
                    fn : function(p, data, e) {
                        var newRec = new this.grid.eventStore.recordType({
//	                        Title: 'New task', 
                            ResourceId : data.record.get('Id'),
//                           Location : 'Local office',
                            StartDate : data.startDate,
                            EndDate : data.endDate
                        });
                        
                        this.grid.eventStore.add(newRec);
                        
                        // Enter edit mode right away
                        this.editor.show(newRec);
                    },
                    scope : this
                }
            },
            
            trackMouseOver : false
        });
        
        return g;
    },
    
    
    onSave : function(formPanel, newStart, newEnd, record) 
    {
        record.beginEdit();
        formPanel.getForm().updateRecord(record);
        record.set('StartDate', newStart);
        record.set('EndDate', newEnd);
        record.endEdit();
        formPanel.collapse();
//      Ext.Ajax.on("requestcomplete", RequestComplete);
//        formPanel.getForm().submit
 //       ({
        
        	Ext.Ajax.request
        	({	
        	url:"schedule.do",
        	params:
        	{
        		id:record.get("Id"),
        		resourceId:record.get("ResourceId"),
        		title:record.get("Title"),
        		location:record.get("Location"),
        		engagementType:record.get("Engagement"),
        		startDate:newStart,
        		description:record.get("Description"),
        		endDate:newEnd
        	},
        	success: function(objServerResponse)
        	{
        		eval("var resultSet = " +objServerResponse.responseText);
        		alert("server response cu---"+resultSet.id); // outputs whatever was returned from the server in an alert window
                record.beginEdit();
                formPanel.getForm().updateRecord(record);
                record.set('Id',resultSet.id);
                record.endEdit();
        	}
        	});	
 //       });
    }
};


	var designationStore = new Ext.data.JsonStore({
			root : 'params',
			totalProperty : 'total',
			proxy : new Ext.data.HttpProxy({
				url : "getSearchParams.do?searchParamType="+FLD_DESIGNATION
			
			}),
			fields : ['id','name'],
			autoLoad: true
		}); 
	
	var employeeCodeStore = new Ext.data.JsonStore({
			root : 'params',
			totalProperty : 'total',
			proxy : new Ext.data.HttpProxy({
				url : "getSearchParams.do?searchParamType="+FLD_EMPID
				
				
			}),
			fields : ['id','name'],
			autoLoad:  true
		}); 	
	  var sectorStore = new Ext.data.JsonStore({
			root : 'params',
			totalProperty : 'total',
			proxy : new Ext.data.HttpProxy({
				url : "getSearchParams.do?searchParamType="+FLD_SECTOR

			}),
			fields : ['id','name'],
			autoLoad: true
		}); 	  

getSearchForm =  Ext.extend(Ext.form.FormPanel, {
	constructor : function(_config) 
	{
		
		_config = (_config == null) ? {} : _config;
		Ext.apply(this, _config);
		
		getSearchForm.superclass.constructor.call(this, 
		{
			
			id : 'searchForm',
			autoHeight: true,
			labelWidth : 110,
			bodyStyle:'padding:5px 5px 0',
			id:'movieForm',
			errorReader : new Ext.data.XmlReader({record : ""}, []),
		
		items:
			[{
				xtype:'textfield', 
				fieldLabel : 'Employee Name',
				name : "name",
				id:'empName',
				width: 350
			},
			{
				xtype : 'combo',
				fieldLabel : 'Employee Id',
				id : 'empId',
		        typeAhead   : true,
		        editable    : false,
		        mode: 'remote',
		        triggerAction: 'all' ,
		        selectOnFocus : true,
		        emptyText :'Select Employee Code',
		        store: employeeCodeStore,
		        valueField :'id',
		        hiddenName : 'empId',
		        displayField :'name',
		        width: 350
			},
			{
				xtype: 'multiselect',
           		fieldLabel: 'Designation',
           		id:'designation',
           		name: 'multiselect',
           		border:true,
           		width: 350,
	            height :50,
	            mode: 'remote',
	            store: designationStore,
	            valueField :'id',
		        displayField :'name',
		        name : "designation" 
           		
				
			},
		
			{
				xtype : 'textarea',
				id:'education',
				fieldLabel : 'Education',
				height: 60,
				name : "eductaion",
				width: 350
			},
			{
				xtype : 'textarea',
				id:'skillSet',
				fieldLabel : 'Skill Set',
				height: 60,
				name : "skillSet",
				width: 350
			},
			{
				layout:'column',
				border :false,	
				items:
				[{ 
		  				columnWidth:.23, 
						layout: 'form',
						border :false,		
		  				items:
						[{
								xtype : 'label',
								fieldLabel : 'Experience',
								anchor:'100%'
								 
						}]
				},
				
				{ 
		  				columnWidth:.35, 
						layout: 'form',
						border :false,		
		  				items:
						[{
								xtype : 'textfield',
								id : 'startExp',
								width:40,
								labelWidth:0,
								fieldLabel : 'Start',
								anchor:'96%',
								name:"startExp"
								 
						}]
					},
					{
						columnWidth:.35, 
						layout: 'form',
						border :false,		 
						items:
						[{
							xtype : 'textfield',
							id:'endExp',
							width:40,
							fieldLabel : 'End' ,
							anchor:'96%',
							name : "endExp"
							
						}]
					}]
					
			},
			{
				xtype: 'multiselect',
           		fieldLabel: 'Sector',
           		id : 'sector',
           		border:true,
           		width: 350,
	            height :80,
	            store: sectorStore,
	            valueField :'id',
		        hiddenName : 'id',
		        displayField :'name',
		        name :"sector" 
	             
			
			},
			
			{
				xtype : 'combo',
				fieldLabel : 'Gender',
				id:'gender',
		        typeAhead   : true,
		        editable    : false,
		        mode: 'local',
		        triggerAction: 'all' ,
		        selectOnFocus : true,
		        listWidth   : 385,
		        emptyText :'Select Gender',
		        store: genderTypeStore,
		        valueField :'dataFieldName',
		        hiddenName : 'gender',
		        displayField :'displayFieldName',
		        width: 350
		       
			},
			{
				xtype:'textfield', 
				fieldLabel : 'Location',
				id : 'location',
				width: 350,
				name :"location"
				
			},
			{
				xtype : 'datefield',
				fieldLabel : 'Schedule Start',
				id:'scheduleStartDate',
				width: 350,
				name : "scheduleStartDate"
			},
			{
				xtype : 'datefield',
				fieldLabel : 'Schedule End',
				id:'scheduleEndDate',
				width: 350,
				name : "scheduleEndDate"
			},
			
			{
				xtype: 'radiogroup',
    			fieldLabel: 'Schedule',
    			id :'schedule',
    			itemCls: 'x-check-group-alt',
    			columns: 3,
    			items: 
    			[{boxLabel: 'Occupied', name: 'schedule',inputValue:'yes'},
        		{boxLabel: 'Not Occupied', name: 'schedule',inputValue:'no'},
        		{boxLabel: 'Both', name: 'schedule',inputValue:'all'}]
        		
			
			}]
		})	
		
		
	}
});			


onSearch = function()
{
	var _form = new getSearchForm();
	
	var _window = new Ext.Window({
		title : 'Search',
		width : 550,
		resizable : true,
		plain : true,
		modal : true,
		
		
		bodyStyle : 'padding:5px;',
		buttonAlign : 'right',
		layout:'fit', 
		items : _form,
		buttons : 
		[{
			text : 'Submit',
			handler : function() 
			{
				_window.setVisible(false);
				/*if (_form.getForm().isValid()) 
				{
					//Ext.Ajax.on("requestcomplete", RequestCompleteWin, _window);
					_window.setVisible(false);
				}
				_form.getForm().submit(
				
					
					
				);*/
			/*	_window.setVisible(false);
				//resourceStore.removeAll();
				resourceStore.load(
        			{
        				params :
						{
							searchAll : "no"
							empId : Ext.getCmp("empId").getValue(),
							empName :Ext.getCmp("empName").getValue(),
							designation : Ext.getCmp("designation").getValue(),
							education: Ext.getCmp("education").getValue(),
							skillSet: Ext.getCmp("skillSet").getValue(),
							startExp: Ext.getCmp("startExp").getValue(),
							endExp: Ext.getCmp("endExp").getValue(),
							sector: Ext.getCmp("sector").getValue(),
							gender: Ext.getCmp("gender").getValue(),
							empLocation: Ext.getCmp("location").getValue(),
							scheduleStartDate: Ext.getCmp("scheduleStartDate").getValue(),
							scheduleEndDate: Ext.getCmp("scheduleEndDate").getValue(),
							schedule: Ext.getCmp("schedule").getValue()
						}
        			})*/
					
				
			}
		}, 
		{
			text : 'Reset',
			handler : function() 
			{
				_form.getForm().reset();
			}
		},
		{
			text : 'Cancel',
			handler : function() 
			{
				_window.close();
			}
		}]
		
	});
	_window.show();
	
}

Post by mats »

Try setting some default values prior to showing the editor:
dragcreateend : {
                    fn : function(p, data, e) {
                        var newRec = new this.grid.eventStore.recordType({
                            Location : '',
                            Engagemnet : '',
                            Description : '',
                            ResourceId : data.record.get('Id'),
                            StartDate : data.startDate,
                            EndDate : data.endDate
                        });
                       
                        this.grid.eventStore.add(newRec);
                       
                        // Enter edit mode right away
                        this.editor.show(newRec);
                    },
                    scope : this
                }
            },

Post Reply