1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Metz, France
    Posts
    60
    Vote Rating
    2
    iNes14 is on a distinguished road

      1  

    Default Answered: Problem to integrate the new ExtJs Calendar

    Answered: Problem to integrate the new ExtJs Calendar


    Hello!

    I'm using the new ExtJs Calendar into my ExtJS 4.1 project. I want to have the calendar into a tabPanel. But I met a problem : I have an error TypeError: contentEl is null when I want to open this tab.

    Someone has an idea ? I can't find anything on forum to help me.

    Has someone integrate this new calendar ?

    Thank you,

    Inès

  2. The following should work .. please update your paths accordingly:

    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'Ext.calendar': '../../extjs4/examples/calendar/src',
            'Ext.calendar.util': '../../../extjs4/examples/calendar/src/util',
            'Ext.calendar.data': '../../extjs4/examples/calendar/src/data',
            'Ext.calendar.form': '../../extjs4/examples/calendar/src/form'
        }
    });
    
    Ext.require([
        'Ext.picker.Date',
        'Ext.calendar.util.Date',
        'Ext.calendar.CalendarPanel',
        'Ext.calendar.data.MemoryCalendarStore',
        'Ext.calendar.data.MemoryEventStore',
        'Ext.calendar.data.Events',
        'Ext.calendar.data.Calendars',
        'Ext.calendar.form.EventWindow'
    ]);
    
    Ext.onReady(function(){
    
        Ext.create('Ext.tab.Panel', {
            width: 800,
            height: 800,
            renderTo: document.body,
            items: [{
                title: 'My Calendar',
                xtype: 'calendarpanel',
                eventStore: Ext.create('Ext.data.ArrayStore', {}),
                calendarStore: Ext.create('Ext.data.ArrayStore', {})
            }, {
                title: 'Bar',
                tabConfig: {
                    title: 'Custom Title',
                    tooltip: 'A button tooltip'
                }
            }]
        });
     
    });
    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,882
    Answers
    653
    Vote Rating
    439
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      2  

    Default


    The following should work .. please update your paths accordingly:

    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'Ext.calendar': '../../extjs4/examples/calendar/src',
            'Ext.calendar.util': '../../../extjs4/examples/calendar/src/util',
            'Ext.calendar.data': '../../extjs4/examples/calendar/src/data',
            'Ext.calendar.form': '../../extjs4/examples/calendar/src/form'
        }
    });
    
    Ext.require([
        'Ext.picker.Date',
        'Ext.calendar.util.Date',
        'Ext.calendar.CalendarPanel',
        'Ext.calendar.data.MemoryCalendarStore',
        'Ext.calendar.data.MemoryEventStore',
        'Ext.calendar.data.Events',
        'Ext.calendar.data.Calendars',
        'Ext.calendar.form.EventWindow'
    ]);
    
    Ext.onReady(function(){
    
        Ext.create('Ext.tab.Panel', {
            width: 800,
            height: 800,
            renderTo: document.body,
            items: [{
                title: 'My Calendar',
                xtype: 'calendarpanel',
                eventStore: Ext.create('Ext.data.ArrayStore', {}),
                calendarStore: Ext.create('Ext.data.ArrayStore', {})
            }, {
                title: 'Bar',
                tabConfig: {
                    title: 'Custom Title',
                    tooltip: 'A button tooltip'
                }
            }]
        });
     
    });
    Scott.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Metz, France
    Posts
    60
    Vote Rating
    2
    iNes14 is on a distinguished road

      0  

    Default


    Thank for the reply.

    My code :

    Code:
    me.eventStore = Ext.create("Ext.calendar.data.MemoryEventStore", {
            // defined in ..\..\..\classes\ux\Calendar\src\data\Events.js
            	data: Ext.create("Ext.calendar.data.Events")
        	});
        	
        	me.calendarStore = Ext.create("Ext.calendar.data.MemoryCalendarStore", {
            // defined in ..\..\..\classes\ux\Calendar\src\data\Calendars.js
            	data: Ext.create("Ext.calendar.data.Calendars")
        	});
        	
    		me.items = 
    		{ 
            	xtype: "calendarpanel",
            	eventStore: me.eventStore,
            	calendarStore: me.calendarStore,
            	layout:"fit",
            	border: 0, margin:0
    		};
    I could see the calendar but not the store. I can't neither click on a case to create a new event.
    If I do a 'console.log', stores are empty. Have you any idea ?

  5. #4
    Sencha User
    Join Date
    Feb 2013
    Posts
    2
    Vote Rating
    0
    amine2013 is on a distinguished road

      0  

    Default integrate calendar on extjs4

    integrate calendar on extjs4


    hello friends

    i have an extjs4 mvc project and i want to add a view that contain calendar

    any one help me to fix it

    what import should i add

    and thanx

  6. #5
    Sencha User gevorgdarbinyan's Avatar
    Join Date
    Feb 2013
    Location
    Armenia, Yerevan
    Posts
    6
    Vote Rating
    1
    gevorgdarbinyan is on a distinguished road

      1  

    Default


    Thanks very very much, this code help me!!!! my greetings to you
    G.D