Show cool things you have done with our products


Post by omermx »

Hi struggling with the Sch.EditorSchedulerPanel component. The example that ships with the eval pack is far too complex and cannot just be dropped into my existing code. The example in the API docs does not work at all. Can you please supply a simple example, that isn't encapsulated in tons of functions, with local store data that could just be pasted into a page and works.

Thanks. :oops:

Post by mats »

Docs have been updated, thanks for pointing out the error. Below is a very basic implementation of the EditorSchedulerPanel, let me know how it goes! :)
Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'https://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';
    Ext.QuickTips.init();
    
    var today = new Date();
    today.clearTime();
    
    var staffStore = new Ext.data.JsonStore({
        sortInfo:{field: 'Name', direction: "ASC"},
        idProperty : 'Id',
        fields : [
            {name: 'Id'},    // Mandatory field
            {name: 'Name'}
        ],
    });
    
    // Store holding all the events
    var eventStore = new Ext.data.JsonStore({
        fields : [
            {name: 'ResourceId'},                           // Mandatory field
            {name: 'StartDate', type : 'date'},             // Mandatory field
            {name: 'EndDate', type : 'date'},               // Mandatory field
            
            {name: 'Title'}
        ]
    });
    
    staffStore.loadData([
                {Id : 'r1', Name : 'Mike'},
                {Id : 'r2', Name : 'Linda'},
                {Id : 'r3', Name : 'Don'},
                {Id : 'r4', Name : 'Karen'},
                {Id : 'r5', Name : 'Doug'},
                {Id : 'r6', Name : 'Peter'}
        ]);
        
    eventStore.loadData([
        {ResourceId: 'r1', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 3)},
        {ResourceId: 'r2', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 2)},
        {ResourceId: 'r3', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 3), EndDate : today.add(Date.WEEK, 4)},
        {ResourceId: 'r4', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 5)},
        {ResourceId: 'r5', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)},
        {ResourceId: 'r6', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)}
    ]);
    
    var g = new Sch.EditorSchedulerPanel({
        height:200,
        width: 400,
        renderTo : Ext.getBody(),
        
        // Setup static columns
        columns : [
           {header : 'Staff', sortable:true, width:120, dataIndex : 'Name', editor : new Ext.form.TextField()}
        ],
        
        viewConfig : { forceFit:true },
        
        store : staffStore,         // Mandatory property
        eventStore : eventStore,    // Mandatory property
        
         // Setup your view configuration
        viewModel : {
            start : today,
            end : today.add(Date.MONTH, 3),
            columnType : 'month'
        }
    });
});

Post by omermx »

Hi Mats, this example works!

thanks.

Post by omermx »

When adding an Event Editor plugin everything breaks, I have a BorderLayout, with a CardLayout Panel in the Central region, the EditorSchedulePanel is an item of that Panel.

The only error in firebug is:

c is null
[Break on this error] var _0xd396=["\x43\x2E\x31\x49\x28\x27...396[3][_0xd396[2]](_0xd396[1]),0,{}));

The diagnostic tool says everything is okay. Here's some code:
Ext.QuickTips.init();
    

		


    var today = new Date();
    today.clearTime();
    
    var staffStore = new Ext.data.JsonStore({
        sortInfo:{field: 'Name', direction: "ASC"},
        idProperty : 'Id',
        fields : [
            {name: 'Id'},    // Mandatory field
            {name: 'Name'}
        ],
    });
    
    // Store holding all the events
    var eventStore = new Ext.data.JsonStore({
        fields : [
            {name: 'ResourceId'},                           // Mandatory field
            {name: 'StartDate', type : 'date'},             // Mandatory field
            {name: 'EndDate', type : 'date'},               // Mandatory field
            
            {name: 'Title'}
        ]
    });
    
    staffStore.loadData([
                {Id : 'r1', Name : 'Mike'},
                {Id : 'r2', Name : 'Linda'},
                {Id : 'r3', Name : 'Don'},
                {Id : 'r4', Name : 'Karen'},
                {Id : 'r5', Name : 'Doug'},
                {Id : 'r6', Name : 'Peter'}
        ]);
        
    eventStore.loadData([
        {ResourceId: 'r1', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 3)},
        {ResourceId: 'r2', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 2)},
        {ResourceId: 'r3', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 3), EndDate : today.add(Date.WEEK, 4)},
        {ResourceId: 'r4', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 5)},
        {ResourceId: 'r5', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)},
        {ResourceId: 'r6', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)}
    ]);
    
    var x = new Sch.EditorSchedulerPanel({
        height:200,
        autoWidth:true,
        //renderTo : Ext.getBody(),
        
        // Setup static columns
        columns : [
           {header : 'Staff', sortable:true, width:120, dataIndex : 'Name', editor : new Ext.form.TextField()}
        ],
        
        viewConfig : { forceFit:true },
        
        store : staffStore,         // Mandatory property
        eventStore : eventStore,    // Mandatory property
        
		// Specialized template with header and footer
        tooltipTpl : new Ext.XTemplate(
                '<dl class="eventTip">', 
                    '<dt class="icon-clock">Time</dt><dd>{[values.StartDate.format("Y-m-d G:i")]}</dd>',
                    '<dt class="icon-task">Task</dt><dd>{Title}</dd>',
                '</dl>').compile(), 
		
		
			
		listeners : {
                dragcreateend : {
                    fn : function(p, data, e) {
                        var newRec = new this.grid.eventStore.recordType({
                            Id : nextId(),
                            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
                }
            },
			            plugins : [
						this.editor = new Sch.plugins.EventEditor({
							height : 180,
							width : 270,
							buttonAlign : 'left',
							//saveHandler : this.onSave,
							//saveHandlerScope : this,
							fieldsPanelConfig : {
								
								layout : 'form',
								style:'background:#fff',
								border : false,
								cls : 'editorpanel',
								labelAlign : 'top',
								defaults : {
									width : 135
								},
								items : [
									titleField = new Ext.form.TextField({
										name : 'Title',
										fieldLabel : 'Task'
									}),
																]
							},
							listeners : {
								expand : function() {
									titleField.focus(true);
								}
							}
						})
					],


         // Setup your view configuration
        viewModel : {
            start : today,
            end : today.add(Date.MONTH, 3),
            columnType : 'month',
			renderer : function (event, r, row, col, ds) {
        // Add data to be applied to the event template
        return {
            text : event.get('Title'),
            //cls : (event.get('EndDate') - event.get('StartDate')) === 0 ? 'sch-event-milestone-bottom' : 'normalEvent'
        
		}
	}
		}
			
    });
Any ideas? There's not much detail in the documentation for the Plugin...

Post by mats »

Could you post the code you're using to reproduce this error? I'll investigate it asap!

Post by omermx »

Hi, managed to find the culprit:
 Ext.form.Field.prototype.msgTarget="side";
My app is far to large to paste here, but commenting out that line worked - the problem is there was a very good reason for that line of code as the position of the qtip is pretty important in some of my forms. Can you suggest a workaround? :|

Thanks!

Post by mats »

Hmm, where did you find that line?

Post by omermx »

That line is from my own code, not part of the ext-scheduler app. But is required so in some forms the qtip appears on the side, rather than below a field. If you paste that line into your EditorExample (with editor plugin) it should throw an error.

Post by mats »

So if you don't instantiate an eventeditor plugin, all works ok with regards to the scheduler? Your app only breaks when instantiating the plugin? When/how exactly does it break?

Post by omermx »

Yes, if you remove the editor plugin everything works fine, apart from the fact that you can't edit a task! It breaks because all the layout of panels etc. is messed up and any subsequent scripts halt at the error. I couldn't find the implementation of your plugin on the API docs, but I am guessing it is dependent somehow on the position of qtip?

Post Reply