Features, Localization, CRUD

Ask for help related to our Calendar 2.x version
Post Reply
User avatar
TDS
Posts: 3
Joined: Thu May 09, 2019 2:18 pm
Location: Hannover

Features, Localization, CRUD

Post by TDS » Thu May 09, 2019 2:42 pm

Hello,
I've tested the component this week and I have to say it's better than the ux package of ExtJS itself :D
Btw, I have some point to talk about:
- Is that possible to limit agenda date range?
- Is it possible to extend edit form like for your other components, e.g. add place and description fields?
- Is there an example how to use CRUD with Calendar? After editing an event the store update isn't fired. Basic ExtJS components are working with that configuration.

Code: Select all

Ext.define('AdminInterface.store.calendar.Event', {
    extend: 'Cal.data.EventStore',
	storeId: 'event',
    alias: 'CalEventStore',
	autoLoad: true,
	remoteSort: false,
	remoteFilter: false,
	proxy: {
		type: 'ajax',
		actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' },
		api: {
			read: 'resources/data/CalendarEvents.php?action=data',
			create: 'resources/data/CalendarEvents.php?action=add',
			update: 'resources/data/CalendarEvents.php?action=change',
			destroy: 'resources/data/CalendarEvents.php?action=delete'
		},
		reader: {
			type: 'json',
			rootProperty: 'results',
			totalProperty: 'total'
		},
		listeners: {
			exception: function(proxy, response, operation) {
				console.log('Exception: store/CalEvent');
			}
		}
	}
});
- I have done some corrections to german translation :idea: (see attachments)
Attachments
Sch.js
(12.03 KiB) Downloaded 16 times
Cal.js
(1.79 KiB) Downloaded 17 times

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2204
Joined: Fri Apr 01, 2016 11:08 am

Re: Features, Localization, CRUD

Post by pmiklashevich » Thu May 09, 2019 4:45 pm

Hello,
I've tested the component this week and I have to say it's better than the ux package of ExtJS itself :D
Thanks for so sweet feedback!
Is that possible to limit agenda date range?
It's not supported out of the box, but you can try to implement it yourself. Agenda view has its own store and the data is prepared and loaded explicitly. Please check out Cal.view.Agenda.refreshData and Cal.view.Agenda.updateAgendaDates functions for reference.
Is it possible to extend edit form like for your other components, e.g. add place and description fields?
Sure. Calendar event editor plugin extends Scheduler plugin. And editor form extends scheduler editor form. Please refer to the scheduler's docs to see how to do it and feel free to override calendar classes if needed.
Is there an example how to use CRUD with Calendar? After editing an event the store update isn't fired. Basic ExtJS components are working with that configuration.
Please set "autoSync: true," or call eventStore.sync() explicitly after you change an event
I have done some corrections to german translation :idea: (see attachments)
Thanks a lot! I've applied your fixes to the sources.

Best regards,
Pavel
Pavel Miklashevich - Core Developer

User avatar
TDS
Posts: 3
Joined: Thu May 09, 2019 2:18 pm
Location: Hannover

Re: Features, Localization, CRUD

Post by TDS » Thu May 09, 2019 6:43 pm

Is there an example how to use CRUD with Calendar? After editing an event the store update isn't fired. Basic ExtJS components are working with that configuration.
Please set "autoSync: true," or call eventStore.sync() explicitly after you change an event
If I do that I get several requests to server. For example adding an event there are three addings and three changings. And the changes are always with all data in calendar.

Or what are the events I have to use on my own? Couldn't find anything in the docs like afterchange or eventchange.

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2204
Joined: Fri Apr 01, 2016 11:08 am

Re: Features, Localization, CRUD

Post by pmiklashevich » Fri May 10, 2019 12:04 pm

Yes, I see several requests problem when autoSync is true. Ticket here: https://app.assembla.com/spaces/bryntum/tickets/8370

But if I call sync manually it works fine though

Code: Select all

Ext.first('calendarpanel').getEventStore().sync()
Another option is to use our CRUD manager provided by Scheduler to handle multiple requests at once. Unfortunately we don't have an example of how to use CRUD manager with Calendar (https://app.assembla.com/spaces/bryntum/tickets/8371), but I've created a quick proof of concept for you. Please see the attachment.

P.S. Please also checkout these guides about the Crud manager:
https://www.bryntum.com/docs/scheduler- ... ud_manager
https://www.bryntum.com/docs/scheduler- ... ud_manager
It's Scheduler docs, but everything is true for Calendar, since Calendar extends Scheduler.
Attachments
calendar.zip
(23.21 KiB) Downloaded 18 times
Pavel Miklashevich - Core Developer

User avatar
TDS
Posts: 3
Joined: Thu May 09, 2019 2:18 pm
Location: Hannover

Re: Features, Localization, CRUD

Post by TDS » Sat May 11, 2019 5:51 pm

Good news: Overriding the editor classes gives me custom event form. The last thing is synchronizing data.
If i use CrudManager I have to include full Scheduler. Is there a way without it and listen to

Code: Select all

beforeeventadd
beforeeventdelete
beforeeventsave
inside Cal.panel.Calendar? The Following isn't working:

Code: Select all

		this.on('beforeeventadd', function(editor, record, rrecord) {
			console.log('beforeeventadd');
		});
		this.on('beforeeventdelete', function(editor, record, rrecord) {
			console.log('beforeeventdelete');
		});
		this.on('beforeeventsave', function(editor, record, rrecord) {
			console.log('beforeeventsave');
		});
also not working:

Code: Select all

	listeners: {
		beforeeventadd: function(editor, record, rrecord) {
			console.log('beforeeventadd');
		},
		beforeeventdelete: function(editor, record, rrecord) {
			console.log('beforeeventdelete');
		},
		beforeeventsave: function(editor, record, rrecord) {
			console.log('beforeeventsave');
		}
	},
Addition:
If I use Sencha Cmd there is a problem. I tried "require" Sch.* and Cal.* but it doesn't work. Did you try to override and build an evironment?

Code: Select all

[ERR] C2016: Override target not found -- \admin\app\view\calendar\MainPanel.js:95:2268
[ERR] C2016: Override target not found -- \admin\app\view\calendar\MainPanel.js:99:2373
[WRN] Override AdminInterface.calendar.widget.form.EventEditor in file \admin\app\view\calendar\MainPanel.js had no target detected
[WRN] Override AdminInterface.calendar.widget.form.EventEditor in file \admin\app\view\calendar\MainPanel.js had no target detected
[WRN] C1014: callParent has no target (me.callParent in AdminInterface.view.calendar.MainPanel.initComponent) -- \admin\app\view\calendar\MainPanel.js:222:5606
I can run the build but get strange behaviour with the calendar view, e.g. dates are stripped after half of month in month view. I see a warning in web console:
[W] XTemplate evaluation exception: Cannot read property 'allEvents' of undefined
Attachments
2019-05-12 14.15.36 kunden.tds.devel 3c1dd44b6a97.jpg
2019-05-12 14.15.36 kunden.tds.devel 3c1dd44b6a97.jpg (63.28 KiB) Viewed 218 times

User avatar
pmiklashevich
Core Developer
Core Developer
Posts: 2204
Joined: Fri Apr 01, 2016 11:08 am

Re: Features, Localization, CRUD

Post by pmiklashevich » Mon May 13, 2019 8:53 am

Please use beforeeventadd, beforeeventdelete, beforeeventsave provided by EventEditor form. For example:

Code: Select all

    eventEditor : {
        editorConfig : {
            listeners : {
                beforeeventadd : function() {
                    console.log('beforeeventadd');
                }
            }
        }
    },
If I use Sencha Cmd there is a problem. I tried "require" Sch.* and Cal.* but it doesn't work. Did you try to override and build an evironment?
Please create a new thread and provide a runnable testcase.
I can run the build but get strange behaviour with the calendar view, e.g. dates are stripped after half of month in month view. I see a warning in web console:
[W] XTemplate evaluation exception: Cannot read property 'allEvents' of undefined
How I can reproduce the issue? Please create a new thread and provide a runnable testcase based on one of our sample.

Next time when you ask for help, please do not mix all your questions in one post. It's hard to support it. Please break them up by some small logical topics.

Best,
Pavel
Pavel Miklashevich - Core Developer

Post Reply