0

I want to use extjs in visualforce but i am getting error Uncaught ReferenceError: Ext is not defined i also added all library related to ext js but this time also getting same error so How to solve this error. I have a urgent requirement to solve this issue .

<apex:page standardStylesheets="false">
<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" />
       <script type="text/javascript" src="https://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script> 
       <script type="text/javascript" src="https://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
</head>

<!--
<apex:stylesheet value="{!$Resource.examples}"/>
<apex:stylesheet value="{!$Resource.extall}"/>
<apex:stylesheet value="{!$Resource.schall}"/>
<apex:includeScript value="{!$Resource.gajs}"/>
<apex:includeScript value="{!$Resource.exampleshared}"/>-->

<script>
 Ext.ns('App');

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

Ext.require([
    'Sch.panel.SchedulerTree',
    'Sch.plugin.Zones'
]);

Ext.onReady(function () {
    Ext.define('Gate', {
        extend : 'Sch.model.Resource',
        fields : ['Capacity']
    });

    var resourceStore = Ext.create('Sch.data.ResourceTreeStore', {
        model      : 'Gate',
        proxy      : {
            type : 'ajax',
            //the store will get the content from the .js file
            url  : 'get-data.js'
        },
        folderSort : true
    });


    // Store holding all the departures
    var flightStore = Ext.create('Sch.data.EventStore', {
        data : [
            // Grouping tasks
            {ResourceId : 3, Name : 'Summary', StartDate : "2011-12-02 08:20", EndDate : "2011-12-02 11:25"},
            {ResourceId : 3, Name : 'Summary', StartDate : "2011-12-02 12:10", EndDate : "2011-12-02 13:50"},
            {ResourceId : 3, Name : 'Summary', StartDate : "2011-12-02 14:30", EndDate : "2011-12-02 16:10"},

            {ResourceId : 6, Name : 'London 895', StartDate : "2011-12-02 08:20", EndDate : "2011-12-02 09:50"},
            {ResourceId : 4, Name : 'Moscow 167', StartDate : "2011-12-02 09:10", EndDate : "2011-12-02 10:40"},
            {ResourceId : 5, Name : 'Berlin 291', StartDate : "2011-12-02 09:25", EndDate : "2011-12-02 11:25"},
            {ResourceId : 7, Name : 'Brussels 107', StartDate : "2011-12-02 12:10", EndDate : "2011-12-02 13:50"},
            {ResourceId : 8, Name : 'Krasnodar 101', StartDate : "2011-12-02 14:30", EndDate : "2011-12-02 16:10"},

            {ResourceId : 17, Name : 'Split 811', StartDate : "2011-12-02 16:10", EndDate : "2011-12-02 18:30"},
            {ResourceId : 18, Name : 'Rome 587', StartDate : "2011-12-02 13:15", EndDate : "2011-12-02 14:25"},
            {ResourceId : 24, Name : 'Prague 978', StartDate : "2011-12-02 16:40", EndDate : "2011-12-02 18:00"},
            {ResourceId : 25, Name : 'Stockholm 581', StartDate : "2011-12-02 11:10", EndDate : "2011-12-02 12:30"},

            {ResourceId : 10, Name : 'Copenhagen 111', StartDate : "2011-12-02 16:10", EndDate : "2011-12-02 18:30"},
            {ResourceId : 11, Name : 'Gothenburg 233', StartDate : "2011-12-02 13:15", EndDate : "2011-12-02 14:25"},
            {ResourceId : 12, Name : 'New York 231', StartDate : "2011-12-02 16:40", EndDate : "2011-12-02 18:00"},
            {ResourceId : 13, Name : 'Paris 321', StartDate : "2011-12-02 11:10", EndDate : "2011-12-02 12:30"}
        ]
    });

    var tree = Ext.create('Sch.panel.SchedulerTree', {
        title            : 'Airport departures',
        height           : ExampleDefaults.height,
        width            : ExampleDefaults.width,
        renderTo         : 'example-container',
        rowHeight        : 32,
        eventStore       : flightStore,
        resourceStore    : resourceStore,
        useArrows        : true,
        viewPreset       : 'hourAndDay',
        startDate        : new Date(2011, 11, 2, 8),
        endDate          : new Date(2011, 11, 2, 18),
        multiSelect      : true,
        eventRenderer    : function (flight, resource, meta) {
            if (resource.data.leaf) {
                meta.cls = 'leaf';
                return flight.get('Name');
            } else {
                meta.cls = 'group';
                return '&nbsp;';
            }
        },

        // Experimental
        layout           : { type : 'hbox', align : 'stretch' },

        // Experimental
        lockedGridConfig : {
            resizeHandles : 'e',
            resizable     : { pinned : true },
            width         : 300
        },

        // Experimental
        schedulerConfig  : {
            scroll      : true,
            columnLines : false,
            flex        : 1
        },

        onEventCreated : function (newFlight) {
            newFlight.set('Name', 'New departure');
        },

        columnLines : false,
        rowLines    : true,

        columns : [
            {
                xtype     : 'treecolumn', //this is so we know which column will show the tree
                text      : 'Name',
                width     : 200,
                sortable  : true,
                dataIndex : 'Name'
            },
            {
                text      : 'Capacity',
                width     : 100,
                sortable  : true,
                dataIndex : 'Capacity'
            },
            {
                text      : 'Some other property',
                width     : 100,
                sortable  : true,
                dataIndex : 'Foo'
            }
        ],
        plugins : [
            Ext.create("Sch.plugin.Zones", {
                store : Ext.create('Ext.data.JsonStore', {
                    model : 'Sch.model.Range',

                    data : [
                        {
                            StartDate : new Date(2011, 11, 2, 11),
                            EndDate   : new Date(2011, 11, 2, 13),
                            Cls       : 'sch-cloud-thunder'
                        },
                        {
                            StartDate : new Date(2011, 11, 2, 15),
                            EndDate   : new Date(2011, 11, 2, 18),
                            Cls       : 'sch-cloud-sun'
                        }
                    ]
                })
            })
        ],

        viewConfig : {
            getRowClass : function (r) {
                if (r.get('Id') === 3 || r.parentNode.get('Id') === 3) {
                    return 'some-grouping-class';
                }

                if (r.get('Id') === 9 || r.parentNode.get('Id') === 9) {
                    return 'some-other-grouping-class';
                }
            }
        },

        tbar : [
            'Filter: ',
            {
                xtype     : 'triggerfield',
                emptyText : 'Filter resources',

                triggerCls : 'x-form-clear-trigger',

                onTriggerClick : function () {
                    this.setValue('')
                },

                listeners : {
                    change : function (field, newValue, oldValue) {
                        if (newValue) {
                            var regexps = Ext.Array.map(newValue.split(/\s+/), function (token) {
                                return new RegExp(Ext.String.escapeRegex(token), 'i')
                            })
                            var length = regexps.length

                            resourceStore.filterTreeBy(function (resource) {
                                var name = resource.get('Name')

                                // blazing fast "for" loop! :)
                                for (var i = 0; i < length; i++)
                                    if (!regexps[ i ].test(name)) return false

                                return true
                            })
                        } else {
                            resourceStore.clearTreeFilter()
                        }
                    },

                    specialkey : function (field, e, t) {
                        if (e.keyCode === e.ESC) field.reset();
                    }
                }
                // eof listeners
            }
        ]
    });
});
</script>
</apex:page>
2

When writing JaaScript you need to check your browser's JavaScript console which is where all the JavaScript problems are reported. See e.g. How do I start to debug my own Visualforce/JavaScript? for how to do this.

When I do that in Chrome with the first few lines of your page I see these errors that mean Ext has not been loaded:

Failed to load resource: net::ERR_INSECURE_RESPONSE https://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css
Failed to load resource: net::ERR_INSECURE_RESPONSE https://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js
Failed to load resource: net::ERR_INSECURE_RESPONSE https://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js

which if you Google is typically caused by the site using a self-signed certificate for their HTTPS. The browser considers such content to pose a security risk and so does not load it.

To fix either:

  • Find a CDN (Content Delivery Network) location that uses correctly signed certificates
  • Upload a copy of the content as static resources and reference those in your page

There may be other errors further on in your page: use the techniques in the link in the first paragraph to figure out what those are and then fix them.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.