Discuss anything related to web development but no technical support questions


Post by davidwei »

we are creating a scheduling in salesforce apex page,
I was able to run the Drag Drop From a Grid example
https://www.bryntum.com/examples/schedul ... gdrop.html
in local server.

However, I got lots of 'Resource interpreted as Script but transferred with MIME type text/html' error when I tried to integrate the code into a salesforce apex page. I did upload all the javascript and css source files into a static resource package in salesforce.

we've used bryntum component in other apex pages and they works. The only difference this time is the MVC.
I even tried to add all the file references like the way below:
<apex:page showHeader="true" sidebar="true">
 <head>
    <apex:stylesheet value="{!URLFOR($Resource.ConnectWeb, 'scripts/extdragdrop/resources/css/ext-all.css')}" />

    <!--Scheduler styles-->

    <apex:stylesheet value="{!URLFOR($Resource.ConnectWeb, 'scripts/extdragdrop/resources/css/sch-all.css')}" />

    <apex:stylesheet value="{!URLFOR($Resource.ConnectWeb, 'scripts/extdragdrop/resources/css/style.css')}" />


    <!--Ext 4 includes, NOTE: When you debug this example you should use ext-all-dev.js -->
    <!--<script src="../../../extjs-4.1.1/ext-all-dev.js" type="text/javascript"></script>-->

  <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/ext-all.js')}" />  
    <!--Scheduler files-->


    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/sch-all-debug.js')}" />  
    <!--Application files-->


    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/app.js')}" />  


    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/controller/EmployeeScheduler.js')}" />  

    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/dummydata/availabilitydata.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/dummydata/eventdata.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/dummydata/resources.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/dummydata/unplanned.js')}" />  


    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/model/Resource.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/model/UnplannedTask.js')}" />  

    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/store/AvailabilityStore.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/store/EventStore.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/store/ResourceStore.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/store/UnplannedTaskStore.js')}" />  


    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/view/AvailabilityGrid.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/view/EmployeeScheduler.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/view/SchedulerDropZone.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/view/UnplannedTaskDragZone.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/view/UnplannedTaskDropZone.js')}" />  
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/view/UnplannedTaskGrid.js')}" />      
    <apex:includeScript value="{!URLFOR($Resource, 'scripts/extdragdrop/lib/view/Container.js')}" />  
 </head>

    <div id="example-description" class="x-hidden">
        <p>This sample is an advanced example of how you can drag and drop tasks onto a scheduler panel. It also has
            different availabilities setup for the resources. The availability management is a bit simplified but it will
            give you an idea of how you can implement this. Once a task is dragged onto the schedule, it's constrained to
            the resource (using the <i>constrainDragToResource</i> config option).
            Note that the js for the example code is not minified so it is readable. See <a href="app.js">app.js</a>.
        </p>

    </div>

</apex:page>
still doesn't work.

Any ideas?

Thanks!

David

Post by mats »

No clues sorry, we can't really give advice on APEX since we don't use it ourselves. Try asking in an APEX forum?

Post by Maxim Gorkovsky »

Hello. With latest 4.0 release we announced experimental Lightning Locker support and added a demo showing how to use Bryntum products as Lightning Web Components. Please refer to examples/salesforce/README.md for more details.
Looking forward to your feedback.


Post Reply