Problem with ExtJS 4.1

gistfile1.js

Ext.ns('App');

Ext.Loader.setConfig({ enabled : true, disableCaching : true });
Ext.Loader.setPath('Sch', '');

Ext.require([
    'Sch.panel.SchedulerGrid',
    'Sch.plugin.Pan',
    'Sch.plugin.SimpleEditor',
    'Sch.plugin.Lines',
    'Sch.plugin.Zones'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    App.Scheduler.init();
});


App.Scheduler = {

    // Bootstrap function
    init : function() {

        this.scheduler = this.createScheduler();
        this.scheduler.resourceStore.load();
    },

    renderer : function (item, resourceRec, row, col, ds) {
        var bookingStart = item.getStartDate();

        return {
            headerText : Ext.Date.format(bookingStart, "G:i"),
            footerText : item.getName()
        };
    },

    createScheduler : function() {
        Ext.define('MyEvent', {
            extend : 'Sch.model.Event',
            fields : ['Location']
        });

        // Store holding all the resources
        var resourceStore = new Sch.data.ResourceStore({
            proxy : {
                type : 'ajax',
                url : '/resources/absences.json',
                reader : {
                    type : 'json',
                    root : 'staff'
                }
            },
            model : 'Sch.model.Resource'
        });

        // Store holding all the holidays
        var holidaysStore = new Sch.data.EventStore({
            model : 'Sch.model.Range',
        });


        // Store holding all the events
        var eventStore = new Sch.data.EventStore({
            model : 'MyEvent'
        });

        resourceStore.on('load', function() {
            eventStore.loadData(resourceStore.proxy.reader.jsonData.tasks);
            holidaysStore.loadData(resourceStore.proxy.reader.jsonData.holidays);
        });

        // retrieve the start and end range of the schedule
        var schedulerConfig = jQuery.parseJSON($('#schedulerConfig').html());

        var s = Ext.create("Sch.SchedulerPanel", {
            region      : 'center',
            loadMask    : true,
            width:  1000,
            height: 500,
            enableDragCreation: false,
            enableEventDragDrop: false,
            rowHeight   : 30,
            renderTo : 'resources_scheduler',
            timeAxis : new MyTimeAxis(),
            columns     : [
                { header : 'Employees', sortable:false, width:130, dataIndex : 'Name' }
            ],

            // Setup view configuration
            startDate : Ext.Date.parse(schedulerConfig.start, "Y-m-d"),
            endDate : Ext.Date.parse(schedulerConfig.end, "Y-m-d"),
            viewPreset: 'dayAndWeek',
            eventRenderer : this.renderer,

            // Simple template with header and footer
            eventBodyTemplate : new Ext.Template(
                '<div class="sch-event-footer">{footerText}</div>'
            ),

            plugins : [
                new Sch.plugin.Pan({
                    enableVerticalPan : true
                })
            ],

            resourceStore : resourceStore,
            eventStore : eventStore,
            border : true,
            viewConfig : {
                cellBorderWidth : 0,
                barMargin : 2
            },
            tooltipTpl : new Ext.XTemplate(
                '<strong style="font-weight: bold">{Location}</strong>'
            ).compile()
        });

        return s;
    }
};

Ext.define('MyTimeAxis', {
    extend : "Sch.data.TimeAxis",
    continuous : false,

    generateTicks : function(start, end, unit, increment) {
        return MyTimeAxis.superclass.generateTicks.apply(this, arguments);
    }
});